Geek asks and answers

Change input style when entering text using CSS only

I am creating a page on which I have only access to CSS files.

I want to change the style of an input element if the value is not empty.

Here is what I still have ...

<input id="myInput" type="text" name="myInput" autocomplete="off" placeholder="Enter your Card Number">

and

input {
    font-style:italic;  
}

input:not([value='']) {
    font-style:normal;  
}

This does not work, although the text is not italicized.

Is this possible to achieve given that I can only edit the CSS file?

+5
source share
3 answers

It looks like you are using HTML5 ... if so simply edit the PLACEHOLDER tag

::-webkit-input-placeholder {font-style: italic} /*Chrome */
:-moz-placeholder {font-style: italic} /*ff*/
:-ms-input-placeholder {font-style: italic} /*ie latest */

JSFIDDLE:

http://jsfiddle.net/Riskbreaker/wCff9/

+4
source

Perhaps you want to:

input::-webkit-input-placeholder {
    font-style: italic;
}
input[type=text] {   
    font-style:normal;  
}

http://jsfiddle.net/Le6XM/1/

+1
source

I think what you want to do is the style of the place owner. Give it a try!

        input {
            font-style:italic;  
        }

        ::-webkit-input-placeholder {
            font-style:normal;  
        }

        :-moz-placeholder { /* Firefox 18- */
           font-style:normal;   
        }

        ::-moz-placeholder {  /* Firefox 19+ */
           font-style:normal;  
        }

        :-ms-input-placeholder {  
           font-style:normal;   
        }
0
source

More articles:


All Articles