jquery - 默认情况下，将 form-control 和 input-sm css 应用于页面中的所有输入/选择控件

Question

我有一个网页，其中有多个输入/选择控件。所有这些控件都使用“form-control and input-sm”css。

我正在寻找的是，而不是在每个控件中分别应用两个 css，是否有更好的方法在一个地方全局应用它们并且所有这些控件都继承这些 css 属性？

fiddler : https://jsfiddle.net/Vimalan/ebwwvy6m/1/

HTML:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="form-group">
  <label>Name 1</label>
  <input type="text" class="form-control input-sm">
</div>
<div class="form-group">
  <label>Name 2</label>
  <input type="text" class="form-control input-sm">
</div>
<div class="form-group">
  <label>Email address</label>
  <input type="email" class="form-control input-sm">
</div>
<div class="form-group">
  <label>Password</label>
  <input type="password" class="form-control input-sm">
</div>
<div class="form-group">
  <label>Gender</label>
  <select class="form-control input-sm"></select>
</div>

任何建议将不胜感激。谢谢

Answer 1

您可以只拥有一个包装器并针对其中的每个 input 和 select 标记。

在这种情况下，包装器是 .form-group，但您始终可以将所有控件包装在一个元素中，并在您的 CSS 选择器中使用它。

你将以类似这样的结合 .form-control 和 .input-sm 属性的方式结束:

.form-group input,
.form-group select {
  height: 30px;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
  display: block;
  width: 100%;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.form-group input:focus,
.form-group select: focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}

代码片段:

.form-group input,
.form-group select {
  height: 30px;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
  display: block;
  width: 100%;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.form-group input:focus,
.form-group select:focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group">
  <label>Name 1</label>
  <input type="text">
</div>
<div class="form-group">
  <label>Name 2</label>
  <input type="text">
</div>
<div class="form-group">
  <label>Email address</label>
  <input type="email">
</div>
<div class="form-group">
  <label>Password</label>
  <input type="password">
</div>
<div class="form-group">
  <label>Gender</label>
  <select></select>
</div>