Alter input style when text entered using just CSS

Question

I am styling a page where I have only been given access to the CSS files.

I am looking to alter the style of an input element if it's value is not blank.

Here's what I have so far...

<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 doesn't work though as the text is never italicised.

Is it even possible to achieve this taking into consideration I can only edit the CSS file.?

About the only solution you have here is to change it on :focus. But of course that won't be styled as soon as the input is blurred. You'll need to use JavaScript to achieve what you're trying to do. — BenM
– BenM, Commented Apr 9, 2013 at 15:15
Your code works (in Chrome at least) but only works if the value is set when the page loads since there's no change event to bind to. — j08691
– j08691, Commented Apr 9, 2013 at 15:16

Riskbreaker · Accepted Answer · 2013-04-09 15:28:36Z

4

Looks like you're using HTML5...if so just edit your 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/

answered Apr 9, 2013 at 15:28

Riskbreaker

4,8011 gold badge25 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Miljan Puzović · Accepted Answer · 2013-04-09 15:30:17Z

1

Maybe you want this:

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

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

answered Apr 9, 2013 at 15:30

Miljan Puzović

5,8201 gold badge26 silver badges30 bronze badges

Comments

Camron Wood · Accepted Answer · 2013-04-09 15:45:45Z

0

I think that what you looking to do is style the place holder. Give this 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;   
        }

answered Apr 9, 2013 at 15:45

Camron Wood

1

Collectives™ on Stack Overflow

Alter input style when text entered using just CSS

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related