CSS bootstrap and number_range_filter

[GoogleCodeExporter]

What steps will reproduce the problem?
1. use default Twitter bootstrap 3 CSS with c# .Net MVC 5
2. create a table with column filters in a separate table
3. try to enter values in number range filter - they are not visible
4. comment out lines 300-306 of bootstrap.css:

 *,
 *:before,
 *:after {
   -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
           box-sizing: border-box;
 }

5. numbers are visible in number range fields.

I guess this is a CSS question...

How do I override the bootstrap :before and :after styles for 
.number_range_filter?

I have this in a separate css file and it works:

.number_range_filter
{
    width:16px;
    height: 16px;
    display: inline-block;
}

I just can't override the other bits.

Original issue reported on code.google.com by [email protected] on 19 Nov 2014 at 11:10

Attachments:

• [with bootstrap.png](https://storage.googleapis.com/google-code-attachments/jquery-datatables-column-filter/issue-165/comment-0/with bootstrap.png)
• [without bootstrap.png](https://storage.googleapis.com/google-code-attachments/jquery-datatables-column-filter/issue-165/comment-0/without bootstrap.png)

[GoogleCodeExporter]

Mystery solved. I gave my column filters table a class of 'filters' then in my 
CSS:

.filters *,
.filters *:before,
.filters *:after {
    -webkit-box-sizing:content-box !important;
    -moz-box-sizing: content-box !important;
    box-sizing:  content-box !important; 
}

Original comment by [email protected] on 19 Nov 2014 at 11:46