Change CSS Font-Family for Separate Options in Select Tag

Changing font depend on select option tag

It need js or jquery:

<script>
   $('#font').change(function(){
     $('#caption').css('font-family', $('#font').val());
   });
</script>

Add a jquery file up of your page, In the <head> tag add this:

 <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

and cope my code after the select and text box.

Select option onclick change font-family

I think this is the easy way :)

HTML

<div id="output-text">
  Hello Bros, welcome to the world
</div>
     <select id="input-font" class="input"  onchange="changeFont (this);">
      <option value="Arial">Arial</option>
      <option value="Comic Sans MS">Comic Sans MS</option>
    </select>
<br>

Javascript

<script>
    function changeFont(font){
        document.getElementById("output-text").style.fontFamily = font.value;
    }
</script>

How to change font-family of drop down's list item?

That's because the select elements children (options) aren't really stylable and firefox seems to be the only browser to ignore that part of the spec.

The workaround is to replace your select element with a custom widget that uses only stylable elements and perhaps a little javascript for the interactivity. like what's done here: ~~http://jsfiddle.net/sidonaldson/jL7uU/~~ or http://jsfiddle.net/theredhead/4PQzp/

Change CSS Font-Family for Separate Options in Select Tag

Changing font depend on select option tag

Select option onclick change font-family

How to change font-family of drop down's list item?

Related Topics

Leave a reply