は、ブートストラップ入力

Question

に国境を退治質問は短いです：どのように私は私のCSSの亜種の数百人を試した後、完全に無力だブートストラップ入力要素in this example ?の周りにこのグレーの境界線を取り除くありません。

私は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：SE

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状態に「トリガー」ですので、あなたが削除した場合には、滞在します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もあります。