html - 向内联输入添加边框

Question

我在一行中有三个输入，我只想给第三个输入添加一个边框，比如一个框。我为第三个输入添加了一个类来调整边框但没有成功。

.valid-version {
  border: #0f7864;
  border-style: solid;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group">
  <label for="inputName" class="col-lg-2 col-sm-1 control-label">product</label>
  <div class="col-md-2 col-sm-2">
    <input type="text" class="form-control" name="product">
  </div>
  <label for="inputName" class="col-lg-1 col-sm-1 control-label">version</label>
  <div class="col-md-1 col-sm-2">
    <input type="text" class="form-control" name="version">
  </div>

  <div class="valid-version">
    <label for="inputName" class="col-lg-1 col-sm-1 two-lines control-label">Valid</label>
    <div class="col-lg-2 col-sm-3">
      <select class="form-control">
        <option>yes</option>
        <option>no</option>
      </select>
    </div>

  </div>
</div>

转到完整 View (以便将所有输入都放在一行中)

Answer 1

在你的类中添加 select 因为你在 select 的主 div 中添加了 css

.valid-version select{
  border: #0f7864;
  border-style: solid;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group">
  <label for="inputName" class="col-lg-2 col-sm-1 control-label">product</label>
  <div class="col-md-2 col-sm-2">
    <input type="text" class="form-control" name="product">
  </div>
  <label for="inputName" class="col-lg-1 col-sm-1 control-label">version</label>
  <div class="col-md-1 col-sm-2">
    <input type="text" class="form-control" name="version">
  </div>

  <div class="valid-version">
    <label for="inputName" class="col-lg-1 col-sm-1 two-lines control-label">Valid</label>
    <div class="col-lg-2 col-sm-3">
      <select class="form-control">
        <option>yes</option>
        <option>no</option>
      </select>
    </div>

  </div>
</div>