CSS - SELECT Element - BORDER-RADIUS - Opera showing border for selected input? How without a curved border?

Question

I am having problems with select element style in opera.

What happens is that most of the styles applied to this element in css are shown in Opera (11.60), but for some reason the bits are also not taken into account, like the shadow box effect and border radius.

It seems to me that the opera displays the select element over these styles, as I noticed during the transition, that the curved border exists, it is only behind the select element. As in the case, the selection element, when not focused, apparently does not have the effect of the border radius, but when the focus is applied to the element, you then see the border in the transistor, and then disappears behind the element again.

In IE 9, Firefox 9, and the latest version of Chrome, the selected selections appear approximately the same. In general, including Opera, the input element is great for the same element styles that apply.

Here's 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 prints CSS pages:

 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 don’t understand why Opera should react in this way, since I believe that it supports the W3C specification a bit?

Anyway, my assumption is that Opera applies some kind of default style to this select tag. But this is only an assumption.

Anyone else will be able to make any contribution in this regard; or can anyone who has experienced this problem before explain what exactly is going on here?

Thank you in advance for your time to read this!

Answer 1

Improved answer for 2015:

I found that my use of stylized pick lists is very necessary for the time we are in now - that's as soon as I have the best experience since then. And actually there is no solution for javascript. Hard you can use the unordered list and list items, as well as stylize it and grab information from the selected li using some javascript and after using the post ajax post method. IE8 + approach for this without any frameworks would look like this:

 var request = new XMLHttpRequest(); request.open('POST', '/my/url', true); request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8'); request.send(data); 

If you use structure validation, the inline selection is selected in angular and bootstrap below.

Angular

Angular is selected from Angular material , you can stylize on top of it as crazy as you want, or create your own using javascript I did the same.

There is also a Bootstrap user interface , which is an angular structure for all types of form fields.

Bootstrap

If you are not using angular in your project, I think this loading method was the best that I have used so far. Bootstrap select

Old answer

In general, I would say, never reverse engineer the selection button, but somehow check its confirmation method https://gist.github.com/itsadok/1139558

If you only need to hit newer browsers, you can use this and just mark it like any other object:

  -webkit-appearance: none; -moz-appearance: none; appearance: none; 

See some details about it HERE

Or I would choose a solution for javascript there, a lot of people have already been made there, and they shared as follows: adam.co/lab/jquery/customselect or is it bulgaria-web-developers.com/projects/javascript/selectbox or create it yourself like build jquery plugin based on ul and li

in your problem, you could even go for a menu structure such as "ul and li" that gave the jquery call to click something like THIS IS FIDDLE

just grab the text from ".yourtextholder" and send the url

Answer 2

This is the background of the select element, which does not take into account rounded corners. (Similar to ActiveX filters in IE8)

If you do not need a specific background color, you can use a fully transparent background:

 select { background-color: rgba(255, 255, 255, 0.0) } 

The drop-down button still overlaps the corners on the right, but at least on the left you get rid of these "dog ears."