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

使用CSS输入文本时改变输入样式

3 个答案: