CSS border and background color styles are not applied to the select element in IE7.
HTML Code:
<select class="select_box">
<option>xxx</option>
</select>
CSS code:
.select_box
{
border:1px solid #ddd;
background-color:#000;
}
Beyond the background-color sort of being applied (I changed your colours to red)..
There's nothing you can do, and no easy workaround.
If you really want to do this in IE7, you'll have to use JavaScript to swap the selects out; you can theme those however you like and it will work in all browsers (unless JavaScript is disabled, in which case you'd be left with what you had in the first place: a native select element).
Also relevant:
http://www.456bereastreet.com/archive/200701/styling_form_controls_with_css_revisited/
http://www.456bereastreet.com/lab/styling-form-controls-revisited/select-single/
Related
I'm having trouble changing the background color of a certain button on a WordPress plugin.
The button and text are set to white and I'm trying to identify the CSS file that controls it, unfortunately I've had no luck within the inspect element of my browser.
It is incorporated in a popup form - so multiple other files come into play.
I changed the color within the browser during inspect but need a fix.
You can overwrite CSS attributes by setting !important after your definition or by defining the scope better (e.g. by writing body or html before the class selector).
make sure your css file is able to "access" the dom element – if the element is in an iframe the css wont work.
body .wpforms-page-button {
background-color: green !important;
}
Using !important is generally considered hacky. Both rules in your screenshot have the same CSS specificity in that they are both firing on input[type="submit"] and .button.
Without seeing the corresponding HTML I can't give you the exact syntax, but something like
.parentclassname input[type='submit'] and or .parentclassname .button should make your style more specific than the original rule and therefore give it precedence.
Did you try to set !important after the #fff; ?
like this:
input[type=submit] {
background-color: #fff!important;
}
the best way is to define the button in a class, so you can change only the color for this specific button. Otherwise it will changes all the buttons to color #fff if you put the css in a general style.
Is there a way to prevent the pointer/cursor from interacting with elements behind a select element using CSS? This seems to only happen in IE11.
Here is a jsFiddle showing my issue: http://jsfiddle.net/6mzhgmvj/.
The accompanying code is as follows:
<!DOCTYPE html>
<html>
<body>
<select autofocus>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<p><strong>Note:</strong> The autofocus attribute of the select tag is not supported in Internet Explorer 9 and earlier versions, or in Firefox.</p>
</body>
</html>
Repro Steps:
Expand dropdown menu.
Hover over options.
When hovering over options 3 and 4, the cursor rapidly changes between 'default' and 'text' because there is a paragraph element behind it when expanded.
Any help on this would be great.
As said in my comment already, the question Bad cursor in select/option, IE has an answer that suggest a rather complex JS solution.
Something a little simpler might be accomplished like this:
<span><select>
/* options here */
</select></span>
span {
position:relative;
z-index:0;
}
span:after {
content:"";
position:absolute;
top:0;
left:0;
right:0;
height:100px;
background:rgba(255, 0, 0, .25);
z-index:-1;
}
We put a span around the select element, and then position a pseudo-element underneath the select that has cursor:pointer set. That makes the cursor stay pointer even when the lower options are hovered. Edit: Actually, I used cursor:pointer in an earlier version, but then I realized that the cursor IE uses for the select options is a different one, and setting cursor doesn’t seem to be necessary at all – that the element the mouse pointer is over does not have any direct text content seems to be enough already.
(You might want to increase the height of the pseudo element when there’s more options.)
The background color is not needed, I put that in only so that it’s clearly visible where the pseudo element is located. Remove the background, and it’ll still work the same.
One little drawback: That pseudo element has to lay on top of the following content on the z-axis, otherwise the paragraph will “take over” again, and we have the same issue as before. Since usability might suffer from that (can’t start selecting text underneath that pseudo element, focusable elements under it won’t be clickable), here is another version that only makes that element visible when the select has focus:
<span>
<select>
/* options here */
</select>
<span></span>
</span>
span {
position:relative;
z-index:0;
}
span span {
display:none;
content:"";
position:absolute;
top:0;
left:0;
right:0;
height:100px;
background:rgba(255, 0, 0, .25);
z-index:-1;
}
span select:focus + span {
display:block;
}
http://jsfiddle.net/CBroe/y4k35rqn/1/
This uses the adjacent sibling combinator to make the element only show up when the select has focus – that’s why I used an extra span element here, because otherwise I would have no “next sibling” to target from the focused select.
(Of course this doesn’t work so nicely when you absolutely need your select to have autofocus attribute set, why I removed it here. Maybe that’s a compromise you’re willing to make. Or maybe it doesn’t hurt if the element is displayed on page load, since the user will have to remove focus from the select before they can interact with other elements anyway. Your choice.)
This is definitely an IE issue.
While there are a lot of solutions to make autofocus work in IE (in stackoverflow itself), none of them help here where the main issue is select dropdown coming on top of the paragraph tag.
Heres a hack which may help you though :D
p {
cursor: default;
}
Note this is just a hack and doesn't fix the fundamental issue.
I want to know a better solution too.
How can I completely change the design of a element? i am trying to make drop down like following image, what i wrote is
<select>
<option value="0">Title</option>
<option value="1">Mrs</option>
<option value="2">Mr</option>
</select>
i am stuck at put custom image to open drop down list for dropdown and also how to style select element
Some form elements are notoriously hard to style with CSS alone and still appear visually the same across all browsers.
The recommended practice for styling SELECT elemets is generally to use a javascript solution as this will work cross-browser.
Have a look at Chris Coyle's article on this:
http://css-tricks.com/dropdown-default-styling/
You can't style elements such as select in such a way you described it. Things like background-color or border are possible.
Styling with CSS only could go as far like this:
select {
border-radius: 5px;
color: lightgrey;
font-weight: bold;
}
With this CSS you will have the round corners and the font changed.
What's not possible:
Change the icon
Change the background or font of the dropped down box
Try fiddling with javascript, nested divs and a hidden input field. Also a glance at http://jqueryui.com could help you quite much.
I want the "tr" that's currently hovered over to change color, and then change back when the mouse is no longer over it. Is this possible using pure CSS, or is javascript the only solution? (I currently have a javascript solution, so I don't need examples of that)
Thanks!
Yes, this is possible in CSS. The example below will have a red background normally, and a green background when the row is hovered over.
tr td { background: #f00; }
tr:hover td { background: #0f0; }
However, it should be noted that this will not work in IE6, as it does not understand the ":hover" pseudo class on any elements other than <a>.
I believe that javascript is the only solution that will provide cross-browser support.
I think you can use :hover css attribute.
Is it possible to change the border color on a <select/> element in an HTML form?
The border-color style works in Firefox but not IE.
I could find no real answers on Google.
I would consinder enclosing that select block within a div block and setting the border property like this:
<div style="border: 2px solid blue;">
<select style="width: 100%;">
<option value="Sal">Sal</option>
<option value="Awesome">Awesome!</option>
</select>
</div>
You should be able to play with that to accomplish what you need.
As Diodeus stated, IE doesn't allow anything but the default border for <select> elements. However, I know of two hacks to achieve a similar effect :
Use a DIV that is placed absolutely at the same position as the dropdown and set it's borders. It will appear that the dropdown has a border.
Use a Javascript solution, for instance, the one provided here.
It may however prove to be too much effort, so you should evaluate if you really require the border.
No, the <select> control is a system-level control, not a client-level control in IE. A few versions back it didn't even play nicely-with z-index, putting itself on top of virtually everything.
To do anything fancy you'll have to emulate the functionality using CSS and your own elements.
select{
filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=-1,color=#FF0000) progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=1,color=#FF0000);
}
Works for me.
You can set the border color in IE however there are some issues.
Argh... I could have sworn you could do this... just tested and realized I wasn't correct. The notes below still apply though.
in IE8 (Beta1 -> RC1) changing the border color or the background color/image causes a de-theming of the control in WindowsXP (the drop arrow and box look like Windows 95)
you still can't style the options within the select control very well because IE doesn't support it. (see bug #291)
Replacing the border-color with outline-color should work.
<style>
.form-error {
border: 2px solid #e74c3c;
}
</style>
<div class="form-error">
{!! Form::select('color', $colors->prepend('Please Select Color', ''), ,['class' => 'form-control dropselect form-error'
,'tabindex' => $count++, 'id' => 'color']) !!}
</div>