MyBB Community Forums

Full Version: input select drop down style
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
The input select drop down option list has a 2px black border, I can not figure out how to style it. I am just using the theme css editor.

This is the input select output I'm trying to style.
<span class="smalltext"><strong>Inline Post Moderation:</strong></span>
<select name="action">
<optgroup label="Standard Tools">
	<option value="multideleteposts">Delete Posts</option>
	<option value="multimergeposts">Merge Posts</option>
	<option value="multisplitposts">Split Posts</option>
	<option value="multiapproveposts">Approve Posts</option>
	<option value="multiunapproveposts">Unapprove Posts</option>
</optgroup>

</select>

I want it to be global for all <select> <optgroup>. I added my own css for a few other elements but I can not get optgroup border to change color.
optgroup {
	background: #ffffff;
	border: 1px #ff0000 solid;
}

I tried select:optgroup and input:optgroup. I have not edited the template to give optgroup a class. Then the selected <option> has the blue color I like to gray it up a little.

could someone point me in the right direction please?

forum
Inputs such as select usually depend on browser - I don't see any 2px black border on latest Chrome for example. They can't be styled wih HTML/CSS that easily and work in all browsers at the same time. The <select> dropdown may be hard to be modified without using JS - here are some tricks: http://stackoverflow.com/questions/18954...es#tab-top
thanks destroy666
I had stumbled on that when I viewed in chrome a little while ago. The z index for the drop down is off in IE 11. Some tags like select:hover work in IE but not chrome. I like the way the list actually drops down in chrome. I guess it is time for dual css entries. One for IE and one for WebKit layout engine. Just have to figure out what they are. Good read, your posted.

I'm having a little luck with tabindex focus. http://css-tricks.com/almanac/selectors/f/focus/