How to select all inputs except type="value"?

Question

I have a form, and I want to gray out the textboxes, but in doing that, the text of the "submit" type goes light gray too. So I decided to make the CSS for all inputs where the type is not equal to "submit", but I'm having problems doing that. I know that if I wanted to select all inputs that contain "submit", I should use input[type*="submit"] and the syntax to not select a specific element is :not(attribute), but I cant figure out how to implement something like 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="[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>

It is unclear what you want that is not already being done in your code snippet. You said you want to grey out all the input text except the Submit button, and that's what you have right now. — TylerH
– TylerH, Commented Mar 7, 2017 at 2:49

Michael Coker · Accepted Answer · 2017-03-07 02:50:33Z

14

Using the :not() selector with the attribute selector, you can exclude type="submit" from your rule.

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

answered Mar 7, 2017 at 2:50

Michael Coker

53.8k5 gold badges69 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to select all inputs except type="value"?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related