Unable to utilize the rupee font within a select element on Chrome and IE8 browsers

Issues with displaying rupee font in select element on Chrome and IE8

I have implemented WebRupee for showing the Indian currency symbol. The font appears correctly when used within a <p> tag, but when placed inside a select option element, it only displays properly in Firefox and not in Chrome or IE8 (shows as 'R' only).

<select >
   <option>$</option>
   <option>£</option>
   <option>€</option>
   <option style="font-family:WebRupee;">R</option>
</select>​

For demonstration purposes, visit the following link: http://jsfiddle.net/WEJbc/3/

htmlcss

Answer №1

The symbol for the INDIAN RUPEE U+20B9 may not yet be widely available on the Internet as it was just recently added to Unicode version 6.0. It is expected to become more commonly used in various fonts over the next decade. In the meantime, currency names, abbreviations, codes, or existing special symbols like the RUPEE SIGN U+20A8 (₨) can be utilized. When creating dropdown menus for currencies, using localized names is recommended.

Attempting to manipulate characters using trick fonts, such as changing the appearance of the letter 'R', is not a proper solution. Browsers may prevent font changes within certain elements, like option, even if it appears to work under specific circumstances.

Some browsers allow for changing the entire select menu's font through 

select { font-family: WebRupee; }
, but this method presents challenges as well. The WebRupee font does not include the dollar sign ($), resulting in an empty display for options styled with it.

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

My custom CSS in React is being overshadowed by the default Bootstrap styles

View project image Currently working on a React project that requires Bootstrap. However, I am facing issues with Bootstrap overriding my custom CSS. Some default Bootstrap styles are affecting my headings. I have attempted various solutions such as placi ...

cssreactjscdn

How to reach the Twitter share iframe with JavaScript/HTML

There seems to be an issue with the Twitter share button not displaying at its full width on certain pages. Upon investigation, I discovered that the iframe containing it is only set to a width of 24px, when it should actually be set to the correct width. ...

javascripthtmlcsstwitter

Using jQuery and Bootstrap in an ASP.NET Core project

I am encountering an issue with the configuration of bootstrap and jquery within my project, causing these tools to fail to load properly. The problem seems to be that bootstrap is loading before jquery, resulting in error messages appearing when I check ...

javascriptjquerycssasp.nettwitter-bootstrap

Tips for utilizing @htmlattributes when configuring a datepicker:

Hello, I am attempting to change a simple input field into a date form. I have tried using the DateTime property with @Html.TextBoxFor(model => model.dateFin, new { type = "date" }) but it was not successful. As a result, I am resorting to using a simpl ...

htmlasp.net-mvcdatepicker

Is there a way to restrict access to my website to only be opened in the Chrome browser?

Is there a way to prevent my web application from loading when the link is opened in browsers other than Chrome? Can this be achieved using Javascript or Java? I want to restrict the usage of my web application to only Chrome. Any assistance would be appre ...

javascriptcsshtml

Resizable icon next to inline element caused width adjustment

I have a group of individuals listed, each with two elements side by side: a "contact me" button (an 'a' element with a fontawesome icon) and a tag displaying the user type (span element). Some users do not have a tag, and when there is one prese ...

htmlcssinline

Tracking mouse positions across an HTML document

I've been working on a project inspired by the voxel painter example on the three.js page. In this particular example, the mouse coordinates are utilized to move a roll-over helper that indicates where a box will be placed upon click. mouse.set((even ...

javascripthtmlcanvasthree.js

Issue with scrollTop not functioning when using onclick on an <a> tag within a div

After various attempts and research online, I am still experiencing erratic scrolling behavior with the scrollTop function. My goal is to scroll within a specific div when clicking on links. The content of my div: <div id="test" style="height:400px; o ...

javascripthtml

Maintain the HTML font color when printing - Issue with IE settings, not the printer

I've been struggling with this issue all day. Initially, I thought it was a problem with the print settings, but then I realized that it's actually the "Print background colors and images" option in IE causing the trouble. Here is the last test ...

htmlcssinternet-explorerprinting

How to Create Django Templates without Including head, body, and Doctype?

Is it considered the correct or recommended practice to omit the Doctype, head, and body tags? This is a question that arises when looking at examples like tutorial 3 in the Django documentation which can be found here, specifically in the polls/template ...

pythonhtmldjango

My webpage is struggling to locate the CSS stylesheet

Regarding the index file: <link rel="stylesheet" href="css/stylesheet.css"/> Everything seems to be working fine here. However, the rest of my html documents are located in a folder called "pages". I'm facing an issue where it can't loca ...

htmlcss

Activating the onclick function to open a tab and automatically position the cursor inside a textfield

I have a requirement to automatically place the cursor on a specific field whenever a rich tab is navigated to. I attempted using onclick and onlabelclick on the richTab, but it did not work as expected. Then, I tried utilizing ontabenter, which called my ...

javajavascriptjqueryhtmljsf

Output the keycode to the console repeatedly

I'm currently facing a minor mental obstacle: I have a javascript function embedded in html that displays the keycode when a key is pressed. It's connected to a function that provides detailed information about the character and keycode being pre ...

javascripthtmlkeyboard

Uncertain about the ins and outs of AJAX

I am a complete beginner in web development. Although I have studied JavaScript and HTML through books, my understanding is still limited. I have never worked with AJAX before and find most online examples too complex for me to follow. My goal is to crea ...

javascriptjqueryajaxhtml

Updating the contents of a DIV element in a Django application

Seeking a solution to replace the current contents of a DIV with new contents using Ajax GET method. Issue is that the entire page is loading into the DIV instead of just the desired content. function updateContent(){ var data = $('#Data ...

javascriptjqueryhtmlajaxdjango

Issues arise when attempting to resubmit a PHP+JQuery+AJAX form with new values

I'm having trouble understanding why my form isn't refreshing after changing the values. Let me explain further, I have a password recovery form where users enter their email address. The form is processed in PHP using AJAX and displays a valida ...

phpjqueryhtmlajaxforms

What methods are available to create a transition animation for an HTML 5 banner on iOS devices?

I need assistance with animating an HTML5 banner to transition vertically onto the screen in my app demo. After a prompt that triggers a server callback, the banner should smoothly move down from the top of the screen. The animation I am aiming for is simi ...

ioshtmlcsscss-transitionshtml5-animation

Repeatedly triggering the Jquery Dialog Event

When I open a calendar plugin in jquery dialog, I encounter a recurring issue. Every time I close and reopen the dialog, my calendar event onDayClick triggers multiple times – twice, thrice, and so on. <div id="show_calendar"> <div class="c ...

javascriptjqueryhtmldialogrepeat

Flask - Refreshing Forms Dynamically

In an effort to enhance the responsiveness of my app, I am looking for a way to prevent the page from reloading every time a POST request is sent. My current setup includes a dynamically generated form with input fields designed like this: <div class=&q ...

javascriptpythonhtmlflask

Utilizing loop variables in ng-class and ng-click directive

This piece of code generates a list consisting of seven thumbnails, with the currently active image designated by the active and thumb classes. <div ng-repeat="no in [1, 2, 3, 4, 5, 6, 7]"> <img ng-src="images/{{no}}t.jpg" class="thumb" ng ...

javascriptcssangularjs