How to style Disabled Options in a form

Question

I\'m using a form with a drop-down menu that contains some options disabled, so the users cannot select them. I\'m trying to customize via css these elements but I have some

Answer 1

I used :invalid to solve my issue, description below:

So these answers do style the disabled option but only within the dropdown. Not if you wanted to display the disabled option at the top of the list as a "Please select".

Hope this helps others having a similar issue to what I had.

Basically, the select needs to be a required field for this to work:

Assuming the option is at the top of the list:

Please select


And your SCSS looking something like this:

select {

  // The select element is set to required
  // as long as the selected options value
  // is empty the element is not valid.
  &:invalid {
    color: gray;
  }

  // Styling for browsers which do support
  // styling select option elements directly
  [disabled] {
    color: gray;
  }

  option {
    color: black;
  }
}


So it's the :invalid which allows us to colour the disabled selected option.

Thanks to Markus Oberlehner for his post:

Blog post: https://markus.oberlehner.net/blog/faking-a-placeholder-in-a-html-select-form-field/

Codepen: https://codepen.io/maoberlehner/pen/WOWrqO
    

             

                                                        
            
            

              
                
                0
              
                   
                
               讨论(0)
              
                                                  
              
              

                          
             
       
          
              
                                       

     查看其它8个回答


            
                         

                    



               
            

    发布评论: