Clever Geek Handbook

Is it possible to select empty text boxes with CSS?

Is there a way so that I can select the textarea to be $('#id_of_textarea').val()

in jQuery ''

? I have tried using :empty

. I've seen that CSS provides an option to select empty inputs because the text is in the value

( [value=""]

) attribute . Is there an attribute for the text in the textbox?

I am looking for a selector that will work with CSS, not just jQuery.

+8


source to share


3 answers


The best solution I can think of is a CSS 3 workaround. Set the required margin (and set it to dispatch if needed). Then you can use



textarea:invalid { /* style here... probably want to remove box-shadow and such */ }
+15


source


You can use the :empty

css pseudo class .

See jsfiddle for an example .

The example has a button to dynamically add new new text areas to the DOM, so you can see that new elements are also affected by the pseudo-class.



The code in the example has been tested on Firefox 5.0, Opera 11.50 and Chromium 12.

Also, you can see a nice description for an empty pseudo-class here .

-2


source


For those using AngularJS you can use ng-class

in your view to add a class to your textbox to see if it is empty or not.

HTML:

<textarea ng-model="myForm.myTextArea"
          ng-class="(myForm.myTextArea.length)?'not_empty':'empty'">
</textarea>

CSS:

textarea.empty {
    background-color:red;
}
textarea.not_empty {
    background-color:blue;
}

Here is a jsfiddle .

-2


source






More articles:


All Articles