Question

问题很简单：如何摆脱Bootstrap输入元素in this example ?周围的灰色边框我在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

＆＃34; border＆＃34; 来自.form-control的{{1}}值，请将其设置为box-shadow并赢得＆＃39; t show。

none

至于＆＃34;但我喜欢选择输入时的蓝色，我希望此效果保持＆＃34; - 触发＆＃34;＆＃34;触发＆＃34 34;在.form-control{ box-shadow: none; }状态，如果您因CSS特异性删除input:focus，它将保留。

box-shadow

JSFiddle

您可能因CSS specificity而遇到问题，因此请谨慎选择。此处还有good online CSS specificity calculator来检查您的选择器。

摆脱Bootstrap输入中的边框

1 个答案: