Question

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

＆＃13;

input {
    color: #666;
}
input[type*="submit"]{
    color: #000;
}

＆＃13;

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

＆＃13;

Answer 1

将:not()选择器与属性选择器一起使用，您可以从规则中排除type="submit"。

＆＃13;

input:not([type="submit"]) {
  color: red;
}

＆＃13;

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

＆＃13;

如何选择除type =＆＃34; value＆＃34;之外的所有输入？

1 个答案: