Issue with Select Box and Date Selector

HTML & CSS
1

Hi Guys,

Here is link to the page working on…

http://runway25.ca/wp/reservations/

On Chrome the select boxes content is not lined up vertically but is on FireFox bit it goes vertically aligned on Chrome after you select an option which is weird.

I got Date selector to and Preferred Date in there but is it possible to have an icon or something to show to select date and have the icon on both Chrome and FireFox instead of those tools in Chrome once you click in the box.

Also on FireFox the placeholder text are a different color how can I change this.

Thanks,

Mike

2

Any suggestions from anyone?

Thanks,

Mike

3

Also on IE,

The bar runs the wrong way I noticed why is it doing this???

Solved this issue just issue with the select box still.

Thanks,

Mike

4

Unless things have changed, form inputs are notoriously difficult or impossible to style.

It seems each browser has it’s own idea as to how they should look (i.e. similar to their chrome’s inputs) and sometimes you can and sometimes youi can’t style them much.

IMHO don’t spend too much time trying to get the look in every browser identical, as long as it isn’t broken or unusable in any that may be the best you can do.

5

Thanks,

But I recall solving this in the past and used same technique but can’t seem to get it to work properly on Chrome and IE as well.

There must be something I’m just overlooking.

6

Remove the height:45px and they should both look similar.


.styled-select select {height:auto}

Or probably more accurately like this:


.styled-select p{margin:0}
.styled-select select {
padding:12px 0 12px 10px;
height:auto;
line-height:19px;
}

The above is additional over-rides.

7

With selects you basically have to manipulate the padding, line-height and height until all browsers are looking the same. There is no easy way.

Some general hints below:


select{/* height,line-height and padding can't be changed at all in IE6 and 7*/
	padding:7px 2px 5px 10px;
	height:32px;/* Select uses border box model (so padding and borders are included inside the width)*/
	width:160px;
	line-height:26px;/* webkit mac doesn't use height but fiddle with line-height until it looks right*/
	background:transparent;/* !!!!!!  However if you change the background then safari and chrome mac will use height !!!!*/
}
8