CODEWITHSUNDEEP
csstwitter-bootstrap
Edgar Navasardyan
Edgar Navasardyan

Reputation: 4511

Getting rid of borders in Bootstrap input

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

Answers (1)

Vucko
Vucko

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);
}

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.

Upvotes: 2

Related Questions