Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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>
like image 329
Rayon Nunes Avatar asked Jan 05 '23 09:01

Rayon Nunes


1 Answers

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">
like image 58
Michael Coker Avatar answered Jan 09 '23 20:01

Michael Coker