在Bootstrap输入中摆脱边界

Question

问题很简短： 在此示例中，如何消除Bootstrap输入元素周围的灰色边框？ 在我的CSS中尝试了数百种变体后，我完全无助。

我只成功加入了box-shadow: none; ，但此选项不仅会删除边框，而且还会在元素获得焦点时消除蓝色的发光效果。 我确实希望保持这种效果！

HTML：

<table class = 'form table  zeon zeon-row-hover'>
  <thead>
    <th>My column A</th>
    <th>My column B</th>
    <th>My column C</th>
  </thead>
  <tr>
    <td>Smokey</td>
    <td class='zeon_input_table_cell'>
      <input class="form-control input-sm" value="8.0" />
    </td>
    <td>Brown</td>
  </tr>
  <tr>
    <td>Rey</td>
    <td class='zeon_input_table_cell'>
      <input class="form-control input-sm" value="8.0" />
    </td>
    <td>Poe</td>
  </tr>
  <tr>
    <td>Sting</td>
    <td class='zeon_input_table_cell'>
      <input class="form-control input-sm" value="8.0" />
    </td>
    <td>Iglesias</td>
  </tr>
</table>

CSS：

table.zeon tbody tr td
{
    color:rgb(103, 130, 158);
    font-size:12;
    border:none;
}

table.zeon tbody tr td.zeon_input_table_cell
{
    padding: 0;
    border:none;
}

    td.zeon_input_table_cell input
{
    display:table-cell; 
    width:100%; 
    border:none;
    background-color: transparent;
    padding-top:5px;
    padding-bottom:5px;
    padding-left:5px;
  border-color: red;
}

td.zeon_input_table_cell .form-control {
    border: 0;
    /* If I write "box-shadow: none;", borders go away, but I like the blue color when the input
    is selected and I DO want this effect to stay */
}

Answer 1

“边界”来自.form-control的box-shadow值，将其设置为none则不会显示。

.form-control{
    box-shadow: none;
}

至于“但是我喜欢选择输入时的蓝色，但我确实希望保持这种效果” -在input:focus状态上“触发”，因此如果由于CSS的特殊性而删除了box-shadow ，它将保持不变。

.form-control:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(102,175,233,0.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(102,175,233,0.6);
}

JSFiddle

由于CSS的特殊性 ，您可能会遇到问题，因此请谨慎使用选择器。 这也是一个很好的在线CSS特异性计算器，用于检查您的选择器。