CODEWITHSUNDEEP
htmlcss
user2541120
user2541120

Reputation:

Unequal height for drop-down and textbox

I have created a class in css that will beautify the form objects. I observe the height of drop-down and text-box are getting rendered differently, screenshot below along with css and jsfiddle.

enter image description here

Css

    input,select.effect {
    border:1px solid #ccc;
    height: 20px;
    padding:3px;
    width:97%;
    font-size:14px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    }

Html 

<div class="formcontainer">
<form id="bank_details" name="bank_details" action="">
<fieldset><legend>Primary Bank Details</legend>

<div class="bank_name">
<label>Bank Name:</label>
<br />
<select name="" class="effect">
<option value="">Tamilnad Mercantile Co-Operative Bank</option>
</select>
</div>

<div class="account_no">
<label>Account No:</label>
<br />
<input type="text" name="" class="effect" id="" />
</div>
</fieldset>
</form>
</div>

JSFiddle

Upvotes: 1

Views: 3936

Answers (6)

Bram Vanroy
Bram Vanroy

Reputation: 28437

Add some box-sizing to the mix: http://jsfiddle.net/5BdpQ/4/

input,select.effect {
    border:1px solid #ccc;
    height: 20px;
    padding:3px;
    width:97%;
    font-size:14px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Upvotes: 0

Anon
Anon

Reputation: 2874

Don't style default select tag. It's not crossbrowsering. For custom styling select use JQ custom form plugin like this http://vebersol.net/demos/jquery-custom-forms/

Upvotes: 0

omma2289
omma2289

Reputation: 54629

You can fix it by setting the box-sizing property, add this to your rule

input, select.effect {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

Demo fiddle

Upvotes: 1

SHANK
SHANK

Reputation: 2958

You can use the same css style for both the classes and make use of inline css by adding height to the select element:

<select name="" class="effect" style="height:30px">...
...

Hope that solves.

Upvotes: 0

lozadaOmr
lozadaOmr

Reputation: 2655

I separated the styles for the text input, and select tag and removed the height property. It looks fix, although this kind of coding is not advised.

 select.effect {
    border:1px solid #ccc;

    padding:3px;
    width:97%;
    font-size:14px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    }
input{
    border:1px solid #ccc;

    padding:3px;
    width:97%;
    font-size:14px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    }

Upvotes: 1

samrap
samrap

Reputation: 5673

Separate the two styles: 

input.effect {
 border:1px solid #ccc;
 height: 27px;
 padding:3px;
 width:97%;
 font-size:14px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
}
 select.effect {
 border:1px solid #ccc;
 height: 35px;
 padding:3px;
 width:97%;
 font-size:14px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
}

jsFiddle

Upvotes: 1

Related Questions