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!!