input:not([type="checkbox"])

介绍

CSS选择器input:not([type="checkbox"])表示选取所有非复选框类型的输入框元素。它是CSS3的一部分，可以更精确地选择元素，避免使用冗长的代码。

语法

input:not([type="checkbox"]) {
  /* styles */
}

示例

HTML

<form>
  <input type="text" placeholder="用户名">
  <input type="email" placeholder="邮箱">
  <input type="password" placeholder="密码">
  <input type="checkbox" id="checkbox">
  <label for="checkbox">我已经阅读并同意<a href="#">条款和条件</a></label>
  <button type="submit">注册</button>
</form>

CSS

/* 选择所有非复选框类型的输入框元素 */
input:not([type="checkbox"]) {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
}

渲染效果

注意事项

• input:not([type="checkbox"])不仅可以选择文本输入框，也可以选择其他类型的输入框，如type="email"、type="password"等。
• 该选择器不支持IE8及以下版本。