4

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="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>
TylerH
  • 20,799
  • 66
  • 75
  • 101
Rayon Nunes
  • 687
  • 1
  • 8
  • 15
  • 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 Mar 07 '17 at 02:49
  • i just wanted to do the same stuff with less code. – Rayon Nunes Mar 10 '17 at 02:54

1 Answers1

10

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="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">
Michael Coker
  • 52,626
  • 5
  • 64
  • 64