Question

I have set the styling for my text inputs as follows:

/** INPUTS **/

input{
background:#FFFFFF url(../images/input_bg.png) repeat-x;
border:1px solid #CCCCCC;
margin-bottom:20px;
padding:7px;
-webkit-border-radius:2px;
-moz-border-radius:2px;
}

/** Text Inputs **/

input[type=text].small{
    width:33%;
}

input[type=text].medium{
    width:66%;
}

input[type=text].large{
    width:98%;
}

Then I am using a JQuery plug-in that has text inputs and they are being styled the same, the class in question is below:

.dataTables_filter {
    width: 50%;
    float: right;
    text-align: right;   
}

So I created a new CSS rule:

input.dataTables_filter {
    height: 20px !important;
    background: none !important;
}

But I can’t seem to make the text input any smaller.

Any help is much appreciated.

Answer 1

There is padding:7px; on all inputs. Combined with the font-size, this could be keeping the height from shrinking. Try resetting the padding?