CODEWITHSUNDEEP
htmlcss
Markus
Markus

Reputation: 5807

how to make input and select look nice beside eachother with custom height?

Assume I have the following html and style:

HTML

<div id="container">
    <input type="text"/>
    <select><option>val</option></select>
</div>

CSS

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

input, select {
    width: 50%;
    float: left;
    height: 3em;
    line-height: 3em;
}

How can I make the input and select look nice? In Firefox, the height of the select is good but the text val is written at the top of the select, and in webkit browsers the select's height is not changed.

Is there any way to style those select and input with a custom height to look good in most modern browsers (firefox, webkit, opera, >=IE8 maybe?) when placed side by side?

Upvotes: 3

Views: 4580

Answers (4)

CodeMoose
CodeMoose

Reputation: 3025

Select boxes are notoriously resistant to style changes - even if you manage to apply the look you want in one browser, it's almost guaranteed to not work in another. Don't even get me started on mobile.

A lot of people lately have been using a workaround - hide the <select> element, and replace it with a pure HTML structure that uses javascript to mimic the <select> behavior. From there, the html is much much easier to style than the native <select>.

There are a multitude of plugins (across most javascript libraries) that do this, but by far the best I've found is SelectBoxIt. It's extremely easy to use, has universal browser and mobile support, and provides some very advanced options. The only hitch is that it requires jQuery.

http://gregfranko.com/jquery.selectBoxIt.js/

Upvotes: 1

saad arshad
saad arshad

Reputation: 259

use a good reset css and apply css individually like this

input[type="text"]{
/*
style goes here
*/
}

select{
/
}

Upvotes: 0

Markus
Markus

Reputation: 5807

I just got it working sort of with display: table here:

#container {
    display: table;
    width: 20em;
}

input, select {
    width: 50%;
    display: table-cell;
    vertical-align: middle;
}

input {
    height: 3em;
}

the height of the select is not changed, but at least it is aligned vertically centered with the text of the input. this way the styles of the select are the regular of each brother but it looks better then not aligned vertically in the middle.

Upvotes: 0

Novocaine
Novocaine

Reputation: 4786

You can use padding: http://jsfiddle.net/Ldftk/2/

Seems to sort it in my firefox, I've also never been a fan of line-height and removed that. However if you need it then go for it.

It's also worth noting, in my experience, on macs select lists don't appear to take any note of height, or padding unless they have some border.. type property set.

border: none; or border-radius: 0px; for instance. Only one seems to be needed to take effect

Upvotes: 0

Related Questions