Change Ie Background Color on Unopened, Focused Select Box

Change IE background color on unopened, focused select box

In Internet Explorer 11/Edge (not sure about previous versions) you can do this:

select:focus::-ms-value {
    color: black; 
    background: red;
}

You should also specify the font color because it otherwise defaults to white (to originally contrast against the blue), so you'll want to override it too.

Here's a dabblet demo

Change hover background colour in dropdown menu for IE 10 and 11

No, you can not. The drop down is part of the browser UI and not the page content.

Form elements are notoriously difficult to style, with no official W3C spec to do so. The official message is more or less to wait until Web Components/Shadow DOM and friends are ready.

There are some vendor specific ways to style parts of some form controls in IE10+ (and a different set in WebKit/Blink), but this doesn’t cover the drop down of selects. For selects you can only apply the regular styling to the element itself and to the expand button with the ::expand pseudo element. For the full list see http://msdn.microsoft.com/en-us/library/ie/hh869604(v=vs.85).aspx

IE issue with styling select/ element

If you definitely want to do this, you could use a 1px x 1px background image, and set the option to :transparent

select{
    background: url(http://ajthomas.co.uk/stackoverflow-help/back.png);
}
option{
    background: transparent;
}

See the jsfiddle example i have done for you

HTML select selected option background-color CSS style

You may not be able to do this using pure CSS. But, a little javascript can do it nicely.

A crude way to do it -

var sel = document.getElementById('select_id');
sel.addEventListener('click', function(el){
    var options = this.children;
    for(var i=0; i < this.childElementCount; i++){
        options[i].style.color = 'white';
    }
    var selected = this.children[this.selectedIndex];
        selected.style.color = 'red';
    }, false);

Styling a select element in Firefox

Since Firefox 35, "-moz-appearance:none" that you already wrote in your code, finally remove arrow button as desired.

It was a bug solved since that version.

Does replacing a form input's outline with box-shadow violate any WCAG guidelines?

Short Answer

No issues with using box-shadow or outline if you don't need to support IE8. There are a few considerations such as colour contrast but technically your current example passes current guidance (although I would encourage you to increase the colour contrast slightly).

Longer Answer

The main thing you need to consider is colour contrast. As long as the border is a 3:1 contrast ratio with the background then under current guidance you are OK.

However WCAG 2.2 comes into effect from June / July 2021 so you may as well prepare for that.

WCAG 2.2

As long as you have sufficient contrast and it is thick enough to comply with WCAG 2.2 (so you don't have to redo stuff when that comes into effect) you will be fine. The following is a summary of the upcoming rule changes (which the example you gave passes):

Change of contrast: The colour change for the focus indication area has a contrast ratio of at least 3:1 with the colours of the unfocused state.

The following is IN ADDITION to the above:

Contrast or thickness: The focus indication area has a 3:1 contrast ratio against all adjacent colours for the minimum area or greater, or has a thickness of at least 2 CSS pixels.

The focus needs a minimum 3:1 change and also needs to be:

• either 2px thick and/or
• 3:1 against ALL adjacent colors.

For WCAG 2.2 the following rules apply:

• Minimum area: The focus indicator area is either:
  
  • at least as large as the area of a 1 CSS pixel thick perimeter of the unfocused component;
  • at least as large as a 4 CSS pixels border along the shortest side of the unfocused component, and no thinner than 2 CSS pixels.

Obviously WCAG 2.2 is just a draft but I think the principles are pretty close to final for borders and focus indicators.

You can see the WCAG 2.2+ understanding doc for contrast (minimum) here

Internet Explorer(IE) compatibility

The only other thing to consider is compatibility - if you still support IE8 you cannot use box-shadow or outline - and quite a few screen reader users are still using IE8 due to software compatibility.

However I would advise a different basic stylesheet for IE8 anyway as otherwise you are stuck in the dark ages! I personally only support back to IE9 as that is painful enough!

How to expand 'select' option width after the user wants to select an option

If you have the option pre-existing in a fixed-with <select>, and you don't want to change the width programmatically, you could be out of luck unless you get a little creative.

• You could try and set the title attribute to each option. This is non-standard HTML (if you care for this minor infraction here), but IE (and Firefox as well) will display the entire text in a mouse popup on mouse hover.
• You could use JavaScript to show the text in some positioned DIV when the user selects something. IMHO this is the not-so-nice way to do it, because it requires JavaScript on to work at all, and it works only after something has been selected - before there is a change in value no events fire for the select box.
• You don't use a select box at all, but implement its functionality using other markup and CSS. Not my favorite but I wanted to mention it.

If you are adding a long option later through JavaScript, look here: How to update HTML “select” box dynamically in IE

mat-expansion-panel-header background-color on collapse

Add encapsulation: ViewEncapsulation.None into @Component

@Component({
  selector: '...',
  templateUrl: '...',
  styleUrls: ['...'],
  encapsulation: ViewEncapsulation.None
})

Then CSS will work fine

.mat-expansion-panel-header.mat-expanded,
.mat-expansion-panel-header.mat-expanded:hover {
  background: red;
}

Worked on @angular/material version +10

---

Related Topics