Jump to content

Input questions, CSS reference


jPaulB
 Share

Recommended Posts

Hi Everybody,

I have an issue but I can not figure out what the "name" to attach to a CSS action.

I working an eMail form that has just three visitor-inputs. I am using bootstrap 3.3.7 to format this form.

  • a "textarea" for comments

<div><textarea class="form-control" type="textarea" id="comments" placeholder="Place your comments here" name="comments" maxlength="6000" rows="7"></textarea></div>

  • an input type="text" for the visitors' name

<div><input type="text" class="form-control" placeholder="Your Name" id="name" name="name" required></div>

  • an input type="email" for the vistors' eMail address

<div><input type="email" class="form-control" placeholder="Your eMail Address" id="email" name="email" required></div>

They are all belong to the class "form-control".

What I want to do is:

  1. Have the first input (textarea) to automatically be in focus when the pager loads.  (The way it behaves now, a visitor must first click inside any one of the input boxes before they can enter the data requested)
  2. Use a different character-symbol for the cursor, and have that symbol flash
  3. Once a visitor has entered a response to an input box, I would like to modify that box. I am aware that
input[type=text]:focus {   }

           allows for modification when the box is in focus. How would I refer to the box when it is not in focus And has content (like the visitors' name)?

That's it! How do I make these changes to the css file?

Many Thanks,
Paul

Link to comment
Share on other sites

CSS cannot cause elements to focus, this has to be done with Javascript.

You cannot replace the browser's default cursor. You could possibly position a blinking element in front of the field with CSS but it's not going to be very useful:

<style> 
.textfield-wrapper {
  position: relative;
}
.textfield-wrapper::after {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 50px;
  display: block;
  content: "*";
  animation: 1s blink infinite;
}
@keyframes blink {
  0% {opacity: 0;}
  49% { opacity: 0;}
  50% { opacity: 1;}
  100% { opacity: 1;}
}
</style>
<div class="textfield-wrapper">
  <input type="text">
</div>

The problem is that you need Javascript to somehow measure the width of the text that the user has typed and then move the element to that position which is very complicated.

 

You can target elements which are not focused using the :not() selector:

input[type=text]:not(:focus) {   }

CSS does not currently have a selector for empty fields. There's a possible future selector ":blank" but browsers haven't implemented it yet. For now, you will need to use Javascript to find and modify empty fields.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...