Select Every Form Element Except Buttons with CSS3

css, css-selectors

Solution

Simply chain multiple `:not` selectors together:

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

Problem

Is there a way with CSS3 to select every input-related element that does not have a `type` attribute of `button`, `reset`, `submit`, or a tag of `button`? This is what I've gotten so far: ``` input:not([type="submit"]), textarea { /* ... */ } input:not([type="submit"]):focus, textarea:focus { /* ... */ } input:not([type="submit"]):hover, textarea:hover { /* ... */ } ``` ... but it's not as universal as it could be. I'm wanting to apply some nice new transitions to solely input-related fields. If these certain styles get applied to any buttons on the page, it begins to look strange. Any help is appreciated.

Original source