2017-03-07 52 views
0

我有一个表格,我想灰色的文本框,但在这样做,“提交”类型的文字也是浅灰色。所以我决定为所有类型不等于“提交”的输入创建CSS,但是我遇到了问题。我知道,如果我想选择包含“提交”的所有输入,我应该使用input[type*="submit"],并且不选择特定元素的语法是:not(attribute),但我无法弄清楚如何实现诸如input[type:not("submit")之类的内容。如何选择除type =“value”以外的所有输入?

input { 
 
    color: #666; 
 
} 
 
input[type*="submit"]{ 
 
    color: #000; 
 
}
<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="[email protected]" 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>

+0

你想要的东西是不已经在你的代码片段做目前还不清楚。你说你想灰色除了提交按钮之外的所有输入文本,这就是你现在所拥有的。 – TylerH

+0

我只是想用较少的代码做同样的事情。 –

回答

1

使用:not()选择与属性选择器,您可以排除从您的规则type="submit"

input:not([type="submit"]) { 
 
    color: red; 
 
}
<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="[email protected]" 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">

相关问题