html - 仅使用 CSS 输入文本时更改输入样式

Question

我正在设计一个页面，我只能访问 CSS 文件。

如果输入元素的值不为空，我希望更改其样式。

这是我到目前为止所拥有的...

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

和

input {
    font-style:italic;  
}

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

这不起作用，因为文本从不斜体。

考虑到我只能编辑 CSS 文件，是否有可能实现这一点？

Answer 1

看起来您正在使用HTML5 ...如果是这样，只需编辑您的PLACEHOLDER标记

::-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/

Answer 2

也许你想要这个：

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

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

Answer 3

我认为您要做的是设置占位符的样式。试试这个！

        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;   
        }