Html Question posted in
Some basic documentation can be found here.

why css is not working on the options of selector in html?

I want my options in hover state to be yellow but it still blue and border rounding is also not working. Its working for the select but not for its options

this is my html code

 <div class="blackbar" id="blackbar">
<div class="title">
<span id="titleText">Screen</span>
 <input class="search" type="text" id="search" placeholder="Search Movie" >

 <select class="dropdown" id="fruit">
    <option  value="apple">Apple</option>
    <option  value="banana">Banana</option>
    <option  value="orange">Orange</option>
    <option  value="grape">Grape</option>
</select>
</div>
</div>

this is my css code for this


#fruit {
    margin-left: 150px;
    width: 225px;
    height: 42px;
    border-radius: 12px;
    font-size: 24px;
    border: none;
     font-weight: lighter;
     box-shadow: inset 1px 1px 5px rgba(0,0,0, 0.8);
    padding-left: 50px; /* Add padding for indentation */
    overflow-y: auto; /* Enable vertical scrolling */
    max-height: 150px; /* Set maximum height for the dropdown */
  }
  
  /* Style the options */
  #fruit option {
    font-size: 24px;
    color: #333;
    background-color: #fff;
    padding: 10px;
    border-radius: 12px;
  }
  
  /* Style the hover state */
  #fruit option:hover {
    background-color: #cef106;
    color: #000;
  }

help me please

Tags:

2

Answers


  1. 0

    Maybe do display: none on the select option and #fruit > option as your selector?

    Login or Signup to reply.
  2. 0

    There are multiple responses over here: How to style the option of an HTML select element? . Several of the offered answers work inconsistently, but the accepted answer is:

    There are only a few style attributes that can be applied to an
    <option> element.

    This is because this type of element is an example of a "replaced
    element". They are OS-dependent and are not part of the HTML/browser.
    It cannot be styled via CSS.

    There are replacement plug-ins/libraries that look like a but
    are actually composed of regular HTML elements that CAN be styled.

    Basically, currently you can’t use a foolproof method to style existing option HTML elements "out of the box", and them work consistently across all browsers without creating a custom select/option solution or using something like bootstrap: https://getbootstrap.com/docs/5.3/examples/dropdowns/.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search