Search code examples
cssselectbrowseropera

CSS - SELECT Element - BORDER-RADIUS - Opera showing border behind select input? As in no curved border?

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.

It seems to me that opera displays the select element above these styles, as I have noticed in the transitioning that the curved border does exist, it's just behind the select element. As in, the select element when unfocused appears to have no border radius effect, but when focus is applied to the element, you then see the border in transistion then it disappears behind the element again.

In IE 9, Firefox 9 and the latest version of Chrome, the select element in question comes out near uniform. And in all, including Opera, the input element comes out perfectly with the same element styles applied.

unfocued

foxused

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 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 don't see why Opera should react this manner, as I believe it does support the W3C spec somewhat?

In anycase, my assumption is that Opera is applying some sort of default style to this select tag. But that is only an assumption.

Would anyone else be able to provide any input in this regard; or would anyone that has experienced 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!

Solution

  • Improved answer for 2015:

    I found my using of styled select lists very needed for the time we're in now - so here is the once that i have the best experience with so far. And there isn't really any none javascript solution to the issue. Tough you could use a unordered list and list elements and style it, and grab the info from the selected li with some javascript and post trough an 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 are using a framework checkout the build-in selects in angular and bootstrap below.

    Angular

    Angular select comes from angular material you can style on top of this as crazy as you want or style your own, using the frameworks javascript i done the same.

    There is also Bootstrap UI which is an angular framework for all kind of form fields.

    Bootstrap

    If your not using angular in your project i think the way that bootstrap solved it's the best i've used so far. Bootstrap select

    Old answer

    Generally i would say never redesign a select button, but anyhow checkout its way to approche it https://gist.github.com/itsadok/1139558

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

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

    See some stuff about it HERE

    Or i would go for a javascript solution there's a lot of people out there already done it and shared like this: adam.co/lab/jquery/customselect or this bulgaria-web-developers.com/projects/javascript/selectbox or build it my self like a jquery plugin build on ul and li's

    in your issue you could even go for a menu structure like "ul & li", that gave a jquery call on click something like THIS FIDDLE

    just take the text from the ".yourtextholder" and send to the url