在Bootstrap输入中删除边框

问题是简短的：我如何摆脱引导程序输入元素周围的灰色边框in this example ?在我的css中尝试数百个变体后，我完全无助。在Bootstrap输入中删除边框

我只通过包括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 */ 
}

来源

2016-07-08 Edgar Navasardyan

的“边界”来自.form-control的box-shadow价值，本质上它设置为none，它不会显示。

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

至于“但我喜欢的蓝色时，选择输入，我也想要这个效果保持” - 这是对input:focus状态“触发”，所以它会留下，如果你删除box-shadow由于CSS的特殊性。

.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 specificity的问题，所以要小心你的选择。这里还有一个good online CSS specificity calculator来检查你的选择器。

来源

2016-07-08 09:33:13 Vucko

Vucko，一个小问题，请解释如何缩小.form-control选择器，以便它只适用于td.zeon_input_table_cell元素中的那些控件？当我写td.zeon_input_table_cell .form-control时，边界消失了，但阴影也消失了:( –

我更新了这个问题 - 这是由于CSS的特殊性，因为'td.foo'更具体， .foo：active'。您可以使用'td.zeon_input_table_cell .form-control'，但是您还必须使用'td.zeon_input_table_cell .form-control：focus'来返回这些_blue边界_，因为第一个选择器会覆盖引导程序默认的一个。 – Vucko

完美，正是我想要的 –

在Bootstrap输入中删除边框

回答

相关问题