Ray*_*nes 1 css forms input css-selectors
我有一个表单,我想要将文本框变灰,但在这样做时,"提交"类型的文本也变为浅灰色.所以我决定为类型不等于"提交"的所有输入制作CSS,但是我遇到了问题.我知道如果我想选择包含"submit"的所有输入,我应该使用input[type*="submit"]并且语法不选择特定元素:not(attribute),但我无法弄清楚如何实现类似的东西input[type:not("submit").
input {
color: #666;
}
input[type*="submit"]{
color: #000;
}Run Code Online (Sandbox Code Playgroud)
<div class="modal-content">
<form action="/action_page.php">
First Name:<br>
<input type="text" name="firstname" value="First Name" title="Type your First Name" onfocus="this.value='';">
<br><br>
Last Name:<br>
<input type="text" name="lastname" value="Last Name" title="Type your Last Name">
<br><br>
Email:<br>
<input type="email" name="email" value="user@email.com" title="Type your email">
<br><br>
Phone:<br> <!--Brazilian pattern (xx)x.xxxx-xxxx-->
<input type="tel" name="phone" pattern="^\(?:\(\d{2}\)|\d{2})[\d{1}][. ]?\d{4}[- ]?\d{4}"value="(xx)x.xxxx-xxxx" title="Type your phone number">
<br><br>
Age:<br>
<input type="age" pattern=".{2,3}" name="idade" value="Age" title="Idade">
<br><br>
<br><br>
<input type="submit" value="Submit">
</form>
</div>Run Code Online (Sandbox Code Playgroud)
将:not()选择器与属性选择器一起使用,可以type="submit"从规则中排除.
input:not([type="submit"]) {
color: red;
}Run Code Online (Sandbox Code Playgroud)
<input type="text" name="firstname" value="First Name" title="Type your First Name" onfocus="this.value='';">
<input type="text" name="lastname" value="Last Name" title="Type your Last Name">
<input type="email" name="email" value="user@email.com" title="Type your email">
<input type="tel" name="phone" pattern="^\(?:\(\d{2}\)|\d{2})[\d{1}][. ]?\d{4}[- ]?\d{4}" value="(xx)x.xxxx-xxxx" title="Type your phone number">
<input type="age" pattern=".{2,3}" name="idade" value="Age" title="Idade">
<input type="submit" value="Submit">Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
1278 次 |
| 最近记录: |