Question

有没有办法让CSS3选择每个与输入相关的元素，不的type属性为button，reset，{{1 }，或submit的标记？这是我到目前为止所得到的：

button

......但它并不像它那样普遍。我想将一些不错的新转换应用于仅与输入相关的字段。如果这些特定样式应用于页面上的任何按钮，它开始看起来很奇怪。任何帮助表示赞赏。

Answer 1

简单地将多个:not选择器链接在一起：

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

Answer 2

我认为你必须咬紧牙关并做到这一点：

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() s都会取消其他:not()

使用CSS3选择除按钮之外的每个表单元素

2 个答案: