如何选择除 type="value" 之外的所有输入？

Question

我有一个表单，我想将文本框变灰，但这样做时，“提交”类型的文本也会变成浅灰色。 所以我决定为所有类型不等于“提交”的输入制作 CSS，但我在这样做时遇到了问题。 我知道如果我想选择所有包含“提交”的input[type*="submit"] ，我应该使用input[type*="submit"]并且不选择特定元素的语法是:not(attribute) ，但我不知道如何实现类似input[type:not("submit") 。

 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="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>

Answer 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="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">