Geek asks and answers

Select every form element except buttons with CSS3

Is there a way to CSS3 select each element associated with the entry, which does not have the attribute type button, reset, submitor tag button? This is what I got so far:

input:not([type="submit"]),
textarea {

    /* ... */

}

input:not([type="submit"]):focus,
textarea:focus {

    /* ... */

}

input:not([type="submit"]):hover,
textarea:hover {

    /* ... */

}

... but it is not as universal as it could be. I want to apply some nice new transitions only to input related fields. If these specific styles are applied to any buttons on the page, it starts to look weird. Any help is appreciated.

+5
source share
2 answers

Just group several selectors :nottogether:

/* Fields */
input:not([type=button]):not([type=reset]):not([type=submit]):not([type=image]),
textarea {
  outline: 3px solid green;
}

/* Buttons */
input[type=button],
input[type=reset],
input[type=submit],
input[type=image],
button {
  outline: 3px solid red;
}

/* Both */
input,
button,
textarea {
  margin: 6px;
}
<h1>Form elements</h1>
<p>Buttons should be outlined in red, fields in green.</p>
<button>Button</button>
<input type="button" value="Input Button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image" src="//placehold.it/100x40/ffff00/0000ff/?text=foo">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">
<textarea></textarea>
Run codeHide result
+15
source

I think you have to kill the bullet and do this:

input[type=text],input[type=password],input[type=url],input[type=email],textarea,select{
    /* css */
}
input[type=text]:focus,input[type=password]:focus,input[type=url]:focus,input[type=email]:focus,textarea:focus,select:focus{
    /* css */
}
input[type=text]:hover,input[type=password]:hover,input[type=url]:hover,input[type=email]:hover,textarea:hover,select:hover{
    /* css */
}

, CSS , :not() :not() s

-2

More articles:


All Articles