CSS - Border-Radius - SELECT Elements - Opera Browser - Cannot get a curved border?

HTML & CSS
1

I am having trouble trying to style a select element in opera.

What happens, is that most of the styles applied to this element in the css is shown in Opera (11.60), but for some reason bits also get left out, like the box shadow effect and border radius…

In ie 9, firefox 9 and the latest version of chrome, the select element in question comes out near uniform. And in all the including opera, the input element comes out perfectly with the same element styles applied.

This is in opera with the element unfocused:

This is in opera with the element focused:

Heres the html:

<div class="searchBox">
    <form method="post" action="'.$_SERVER['PHP_SELF'].'" name="search">
	<label for="bizName">Biz Name:</label>
	<input name="bizName" class="bizName" type="search" placeholder="Search..." />
	<label for="bizCategory">Biz Category:</label>
	<select name="bizCategory" class="bizCategory" onchange="this.form.submit()">
		<option>Choose</option>
	</select>
	<button type="submit" name="searching" class="search" value="Search">Search</button>
    </form>
    <!-- end .searchBox --></div>

And heres the pages’ css:

input, select {
		background: #fcfcfc;
		border: 0px none;
		font: bold 12px Arial,Helvetica,Sans-serif;
		color: #6a6f75;
		-webkit-border-radius: 20px;
		-moz-border-radius: 20px;
		border-radius: 20px;
		text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
		-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
		-moz-box-shadow: , 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
		-o-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
		box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
		-webkit-background-clip: padding-box;
		-webkit-transition: all 0.7s ease-out 0s;  /* Saf3.2+, Chrome */
		-moz-transition: all 0.7s ease-out 0s;  /* FF4+ */
		-ms-transition: all 0.7s ease-out 0s;  /* IE10? */
		-o-transition: all 0.7s ease-out 0s;  /* Opera 10.5+ */
		transition: all 0.7s ease-out 0s;
	}
	
	input {
		padding: 7px 25px;
		width: 135px;
	}
	
	select {
		padding: 7px 10px;
		width: 185px;
	}
	
	input:focus, select:focus
	{
		background: #6699cc;
		color: #e7f3ff;
		text-shadow:
			-1px -1px 0 #666,
			1px -1px 0 #666,
			-1px 1px 0 #666,
			1px 1px 0 #666;
		-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
		-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
		box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
	}

	.bizCategory {
		margin-right: 15px;
	}

I have found what looks like a work around over here: http://my.opera.com/community/forums/topic.dml?id=1096602

In this post it describes a bug in opera where the select input is styled, but the options within then are not. This causes the input to be viewed at above the select element itsself.

But when i try and restyle this according to the suggestion, i end up with a element that has the edges of the curved border showing up (not all), then when i try to increase the padding, it only increases the size of the input itsself. Adding margin mearly adds spacing between the rest of the input and the select element.

Would anyone be able to provide any input in this regard; or would anyone that has expericed this problem before, be able to explain what exactly is going on here?

Thank you in advance to taking the time to read through this!!

2

Hi,

The chances are that if a style isn’t being applied to a form element then that browsers has decided that you cannot styles it. Select elements are the worst offenders (apart from File inputs) and what you can style varies greatly between browsers.

You can get a round corner effect as long as you add a border in Opera and for best effect is to have a border the same colour as the background color.

e.g.


select {
	border-radius:5px;
	border:2px solid #fcc;
	text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
	background: #fcc;
	padding:5px
}

Nothing much else seems to work though.

3

Hi Paul,

Thanks for your reply and input… I see what you are getting at now, and your css does work out. But i guess my problem was caused by the way i had implemented the styling… The border was rounded on the left and right edges, hence only the edges of the poking out…

This kind of leaves me at a stale mate though. I have designed all my input elements using this css and and now i dont know whether to just get over it, and leave things as they are or try something else…

4

Paul, what is your take on on loading a browser specific css in this situation?

5

Hi,

As far as Opera is concerned then I wouldn’t bother as the user-base is so small and I’m guessing most Opera fans won’t like you messing with the select anyway. You are concentrating on Opera which has about .005% user support and ignoring IE8 and under which has up to 40% (or more in some places) of support so it seems a little one sided :slight_smile:

If you are desperate then you can replace the select with a script which allows you to style it anyway you like. You could probably adjust the script to sniff for opera first if you wanted.

As far as form controls I personally stopped worrying that they looked different years ago but I have used javascript in some cases to replace select elements where the client was adamant. I have however found them slightly less usable when replaced with script. You get the jump when the element initially changes form the select to the css version and then the action is a little slower than the normal select. However they do look better :slight_smile: