Member Avatar for yaragalla_mural

Hi the problem is defining the font only to the text displayed in the dropdown. In detail when we click on the drop down it shows all the available options. these options should have normal or default font size but when i select an option that gets displayed in the dropdown. so this displayed text should have a different font size. Is this possible. if so what is the css for this?

  • 3 Contributors
  • 6 Replies
  • 349 Views
  • 16 Hours Discussion Span
  • Latest Post Latest Post by JorgeM

Dani AI

Generated

Short answer: you cannot dependably force a different font for only the closed, visible value of a native <select> across all browsers and OSes. There are two practical routes: (A) style the native <select> itself (simple, limited control), or (B) replace the native UI with a small, accessible custom widget (full control). This expands on points from and the experimental idea from .

If you only need the visible box to look different, styling the select is the quickest test. Example CSS to change the closed control appearance (won't reliably change the system dropdown on every platform):

select.custom {
  font-family: "Georgia", serif;
  font-size: 18px;
  padding: 6px 10px;
  -webkit-appearance: none;
  appearance: none;
}

For full, consistent control over the displayed value versus the option list, build a custom select that mirrors a native select for form submission and accessibility. Minimal structure and JS sketch:

<div class="fake-select" role="combobox" aria-haspopup="listbox" aria-expanded="false" tabindex="0">
  <span class="selected">Choose...</span>
  <ul class="options" role="listbox">
    <li role="option" data-value="1">Option 1</li>
    <li role="option" data-value="2">Option 2</li>
  </ul>
</div>

<select name="myselect" class="visually-hidden" aria-hidden="true">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</select>

Bind clicks/keyboard events to update .selected and copy the chosen value into the hidden native <select> so forms still submit normally. Important: implement keyboard navigation, focus management, ARIA state updates, and test with a screen reader and on mobile. If you prefer not to implement this yourself, use a maintained library (Select2/Choices/etc.) that handles accessibility and cross-browser quirks.

Recommended Answers

All 6 Replies

Member Avatar for yaragalla_mural

any help will be deeply appreciated. Thank u so much.

Member Avatar for azapovjednik

well, as far as I know, you can easily specify font for some element using CSS
you only have to narrow down the selection of the element....
like:

ul, li {
    font-size:14px; 
    font-family:Arial, Helvetica, sans-serif;
    line-height:21px;
    text-align:left;
    }

or if it belongs to some specific DIV.. name it.. and there you have it...

Member Avatar for JorgeM

As far as I know, you cannot style the options elements listed within the <select> element except for the background-color and color properties. All other styling is applied to the <select> element.

Member Avatar for yaragalla_mural

ya i think what "JorgeM" said is right. I just want to have a different font for the visible text in the <select> box and all other options that gets displayed in the dropdown should have a normal font but i think this is not possible.

Anyways if anybody have a solution please let me know.

Member Avatar for azapovjednik 
<select>

    <option value="Arial">First</option>
    <option value="Verdana">Second</option>


    </select>




    $(function() {
    $('select > option').hover(function() {
        $(this).parent().css({fontFamily:$(this).val()})    
})            
})
Member Avatar for JorgeM

- Can you implement your example in a test page, or jsfiddle to see it action?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.