Question

我有一个网页，其中有几个输入/选择控件。所有这些控件都使用'form-control和input-sm'cs。

我正在寻找的是，而不是分别在每个控件中同时应用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>

Answer 2

假设“form-control”和“input-sm”类始终一起出现在您的文档中，这里有两个工作选项：

案例1

如果这是您使用“form-group”类的唯一实例，或者您希望将相同的样式应用于所有子input / select元素，请尝试以下操作：

<强> HTML

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

然后，在 CSS 中，更改

.form-control {
  /* form-control class CSS Rules */
}

.input-sm {
  /* input-sm class CSS Rules */
}

到

.form-group input,
.form-group select {
  /* form-control class CSS Rules */
  /* input-sm class CSS Rules */
}

在CSS中，一条规则

.foo .bar {
  /* CSS Rules */
}

表示CSS适用于类名为“bar”的任何元素，这些元素是具有类名“foo”的元素的子元素。

案例2

如果其他具有类名“form-group”的元素具有子input / select个元素，那么试试这个：

<强> HTML

<form id="form_id">
    <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>
</form>

<强> CSS

#form_id input,
#form_id select {
  /* form-control class CSS Rules */
  /* input-sm class CSS Rules */
}

在这种情况下，CSS规则仅适用于input / select元素，这些元素是ID为“form_id”的元素的子元素。

Answer 3

如果您使用的是SCSS，则可以轻松地对其进行扩展以使form-control-sm成为聋子：

.form-control {
   @extend .form-control-sm;
}

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

3 个答案:

代码段：

案例1

案例2