CSS3 是否有办法选择每个不具有 button
的 type
属性的输入相关元素,重置
,提交
,还是按钮
的标签?这是我到目前为止得到的:
input:not([type="submit"]),
textarea {
/* ... */
}
input:not([type="submit"]):focus,
textarea:focus {
/* ... */
}
input:not([type="submit"]):hover,
textarea:hover {
/* ... */
}
...但它并没有达到应有的普遍性。我想将一些不错的新转换应用于仅与输入相关的字段。如果将这些特定样式应用于页面上的任何按钮,它就会开始看起来很奇怪。感谢您的帮助。
最佳答案
简单地将多个 :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>
关于css - 使用 CSS3 选择除按钮之外的每个表单元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10830026/