在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輸入中刪除邊框

回答

相關問題