Issue with Internet Explorer: dropdown menu does not show font family options

#select-arial { font-family: Arial; }
#select-verdana { font-family: Verdana; }
#select-geneva { font-family: Geneva; }
#select-sans-serif { font-family: Sans-Serif; }
#select-courier { font-family: Courier; }
#select-monospace { font-family: Monospace; }
#select-georgia { font-family: Georgia; }

    <select name="font_select">
        <option id="select-arial" value="Arial">Arial</option>
        <option id="select-verdana" value="Verdana">Verdana</option>
        <option id="select-geneva" value="Geneva">Geneva</option>
        <option id="select-sans-serif" value="Sans-Serif">Sans-Serif</option>
        <option id="select-courier" value="Courier">Courier</option>
        <option id="select-monospace" value="Monospace">Monospace</option>
        <option id="select-georgia" value="Georgia">Georgia</option>
    </select>

While Firefox and Safari display different fonts, Internet Explorer does not. Can anyone suggest a workaround for this issue?

Thank you

cssinternet-explorerdrop-down-menufont-family

Answer №1

In Internet Explorer, certain form elements cannot be styled directly. One workaround is to design your own custom controls using DHTML and JavaScript.

Here is an example of how you can achieve this:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Set the modal-dialog to have a fixed width, but ensure that it becomes responsive and adjusts size appropriately when the screen size becomes smaller

Utilizing the default Bootstrap3 CSS files for my project. I've come across an issue where the modal-dialog width is set to 600px by default, while I require it to be 1000px for my screen size. Regardless of the screen size exceeding 1000px, I need t ...

csstwitter-bootstraptwitter-bootstrap-3

Is it possible to display a "click" message when a button is hovered over using CSS?

Whenever I hover over a button, I struggle to receive the appropriate message like "click" or "enter" before actually clicking it. How can I use CSS to style my buttons in a way that allows for this pre-click messaging? I have tried approaches such as .bu ...

htmlcssbutton

VueJS is known to cause divs to reach towering heights on buildings

After running npm run build on my VueJS project, the columns in my grid inexplicably stretch to an enormous height. I've spent about 3 hours trying to find the cause, tweaking settings and combing through my CSS files with no luck. It seems like this ...

cssvue.js

Header sticking in place (Wordpress layout)

As a newcomer to HTML/CSS/PHP, I am taking on the challenge of building a website using an existing WP theme called onetone with a sticky header feature. Despite customizing it extensively, I have encountered a frustrating issue with the header. You can v ...

jqueryhtmlcsswordpressheader

creating center-focused gradients in react native using LinearGradient

Hey there, I'm currently facing an issue with applying a box shadow to one of the buttons in my React Native application. Unfortunately, the box shadow property is not supported in Android. To work around this limitation, I am experimenting with creat ...

cssreactjsreact-nativelinear-gradients

Global setting of font size ratio in Material UI library

After reviewing the guidance provided in Material's documentation and this helpful response, I have been attempting to establish a default font-size for the html tag in my application. This adjustment is necessary because my app utilizes REM units, wh ...

cssmaterial-uifont-size

How to Retrieve Element Property Values from the DOM with JavaScript

I am currently attempting to access the property of an element within my webpage. My main objective is to toggle a float property between left and right when a specific onClick event occurs. However, despite my efforts, I am facing challenges in even acces ...

javascriptcsselement

iOS UIWebView doesn't follow CSS line-height

An issue has come up with my web content that I created using an HTML editor. When loading it into a UIWebView, everything is functioning properly except for one small detail - the line-height CSS attribute is being ignored by the UIWebView. Despite the fo ...

iphoneobjective-ccssiosuiwebview

What obstacles may hinder the loading of CSS with PHP variables?

Visit this website for agriculture updates: I have utilized PHP to generate specific color schemes and styles. It seems to function correctly on all tested desktop laptops, however, it fails to load the CSS files (only loads HTML) on a Galaxy Note runnin ...

phpandroidcss

Ways to eliminate the margin space on a Bootstrap 4 progress bar

Currently experimenting with the Bootstrap 4 Progress component and attempting to integrate it within a sentence. Customizing its width to fit between words while realizing it is usually meant to occupy an entire row. Despite reducing its size, there seems ...

cssbootstrap-4

Should we combine social icons into a sprite image, or keep them separate?

Currently in the process of developing an HTML/CSS template, with plans to incorporate social media icons from the following source: These icons are available as 41 individual .png files. The goal is to integrate them into the template using CSS classes f ...

htmlcss

Removing Hidden Menu Options within WordPress

I need help deleting a hidden menu item, and I'm unsure of the potential impact on my other menu items. Thank you for your assistance. The website in question is www.rannitv.com/magazine View screenshot of the menu item here ...

htmlcsswordpress

Prevent a specific keypress action from triggering in a content editable division

I have a content editable div and I am looking to prevent the undo operation (control + z) on this editable div. I attempted the following approach: // The keyup function handles all keypress events. Backspace won't fire for a simple keypress event i ...

javascriptjqueryhtmlasp.netcss

Ways to eliminate the default button styling

I've encountered an issue with the CSS for a button that I created, as it is not displaying as expected. https://i.sstatic.net/qHLZX.png Below is my HTML code snippet: .button{ /* center the button */ margin: 0; position: absolute; top: ...

htmlcss

Aligning a picture at the center of the screen with CSS - Various screen and image sizes

For my project, I need to design a web page with a single image perfectly centered both vertically and horizontally on the screen. Here are the specific requirements: The client's screen size is unknown (mobile) The image will be user-defined with u ...

javascriptcssenyo

Adjusting the Stripe Button to Utilize a Unique Button Class

I have a stripe button on my website and I want to add my custom class to it. I discovered that manually creating the CSS for it can work, but I prefer to maintain consistency across all buttons on my site by using my custom class. No matter what I attemp ...

javascriptjquerycssstripe-payments

Expanding a responsive HTML background image using Javascript

I've spent countless hours grappling with this code, attempting to dynamically resize the background of HTML based on the browser window size using JavaScript. Here's what I have so far (I'm using Firefox for this): GM_addStyle('body ...

javascripthtmlcssfirefoxgreasemonkey

"Refreshing Your Internet Experience with Netbeans Chrome: A Guide to Clear

While developing an HTML / CSS / Javascript / PHP app in Netbeans, I've noticed that making changes to the HTML requires me to 'clear browsing data' in Chrome for the updates to show. I believe it's the 'cached images and files&apo ...

htmlcss

Apply a class to a div element when the WooCommerce cart is devoid of any items

Is there a way to apply a class or style to an element that displays the cart count only when the cart is empty? Currently, I have the following code in my header.php file which shows the cart count correctly, but does not update the color: header.php ( ...

phpcsswordpresswoocommercecart

Overlapping Divs and Colliding Elements

I am currently exploring the moment when my two yellow divs will overlap and make contact with each other. It seems that the collision detection is triggering true even when the divs are not intersecting. If you'd like to take a look at the example, ...

jqueryhtmlcssanimation