Reputation: 4511
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 */
}
Upvotes: 0
Views: 504
Reputation: 20844
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);
}
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.
Upvotes: 2