问题描述:

The question is short: how do I get rid of the this grey borders around the Bootstrap input element in this example ? I am completely helpless after trying hundreds of variants in my css.

I only succeeded by including box-shadow: none;, but this option not only removes borders, but also the blue glowing effect when the element gets focus. I DO want this effect to stay!

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 */

}

网友答案:

The "border" comes from .form-control's box-shadow value, se set it to none and it won't show.

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

As for "but I like the blue color when the input is selected and I DO want this effect to stay" - that's "triggered" on the input:focus state, so it will stay if you remove the box-shadow due the CSS specificity .

.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

You probably have an issue due the CSS specificity, so be careful with your selectors. Here's also a good online CSS specificity calculator to check your selectors.

相关阅读:
Top