The custom radio button is not showing up on iOs Safari

My code for custom radio buttons using CSS is as follows:

input[type=radio]{
    display:none;
}
.radio-options label::before {
    content: "\2b24";
    color:#e2e2e2;
    display: inline-block !important;
    width: 17px;
    height: 17px;
    vertical-align:middle;
    margin-right: 8px;
    background-color: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 8px;
    font-size: 9px;
    text-align: center;
    text-shadow: 0px 0px 3px #fff;
    font-family: monospace;
    padding-top: 1.8px;
    line-height: 10px;
    cursor: pointer;
}

.radio-options label.active-radio::before {
    content: "\2b24";
    color: #f9b410;
    background-color: #fff;
    font-size: 9px;
    text-align: center;
    text-shadow: 0px 0px 3px #fff;
    font-family: monospace;
    margin-left: 0px;
    padding-top: 1.8px;
    line-height: 10px;
}

<div class="radio-options">
      <div class="col-md-6 col-xs-6">
        <input id="some_thing" type="radio"  >
        <label ng-class="{'active-radio':true}">Something</label >
      </div>
</div>

On desktop browsers, the radio button displays correctly, like this: https://i.sstatic.net/iniZa.png

However, on Safari iOS, nothing is displayed as shown in this image: https://i.sstatic.net/SLFoh.png

Any suggestions on what might be causing this issue?

Answer №1

The reason why the content is not displaying on iOS is due to the Unicode symbol being used. To fix this issue, consider switching to a "Black Circle" instead and adjusting the font size accordingly.

Check out the Unicode Black Circle symbol here

You can also read about a similar issue here

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

Guide to taking a screenshot of an HTML page using Javascript, Jquery, and HTML5 functionality

I am looking to add a unique feature to my website - the ability to capture the current image of my webpage with just the click of a button. Inspired by Google's "send feedback" function, I want to implement something similar on my own site. After res ...

The Canvas element inside a Bootstrap modal is returning inaccurate mouse coordinates

I am currently troubleshooting an issue with a HTML5 canvas inside a Bootstrap modal. The canvas is designed to be a selection game where objects can be selected and manipulated. Everything works fine in the center of the 600x600px canvas, but there is an ...

The presence of inline display causes gaps of white space

Located at the bottom of this webpage is a media gallery. The initial three images comprise the photo gallery, followed by video thumbnails inlined afterwards. However, there seems to be an issue with the alignment of each element within the video gallery. ...

The AJAX call in the Ionic app functions successfully when using "ionic serve" in the browser, but encounters issues when trying to run on an iOS device using "ionic upload"

Struggling with this issue for 3 days now. The app functions properly in the browser but encounters issues on iOS devices. When I use an alert to display data retrieved from the ajax call, it shows up as null on iOS. REGISTER.HTML <div ng-controller=& ...

Removing information from the database using a JSP webpage

Having some issues with my online reservation system. The problem lies in the code where users are unable to cancel their reservations using the cancel button on the jsp page. It seems that the code is not properly deleting data from the database. Any sugg ...

New to CSS Media Queries? Discover the Correct Way to Define Element Height!

Sorry for the oversized images! I'm diving into media queries for the first time. When I adjust my browser window to 320px, here's how my site displays: This is what I want it to look like on mobile phones. However, when I view it on my iPhone, ...

Tips on building an immersive interactive panoramic website

I have a vision for a website that will simulate being in a room, where users can explore the space with limited panoramic views - allowing them to look up/down 30 degrees and left/right 45 degrees. In addition, I would like to integrate interactive object ...

What role does the sequence play in matrix transitions that involve rotating and translating simultaneously?

Attempting to animate a matrix3d with both rotation and translation concurrently has yielded unexpected results for me. It seems that changing the order of applying rotation and translation produces vastly different outcomes. http://jsfiddle.net/wetlip/2n ...

Strange behavior observed when making REST calls using Ionic / Angular from an array to localStorage

I need assistance with my Ionic app development to make it more dynamic. Currently, I am making several REST calls and storing their results in local storage. I have defined the URI and name for localStorage in an array. The problem is that when the $ht ...

How can I determine if a page is being rendered in Standards mode or Quirks mode by IE7?

Having some issues with CSS on a webpage. The code is valid and adheres to Strict HTML standards. It displays correctly in most browsers, but I'm experiencing problems in IE (specifically version 7). Is there a way to determine if the page is being re ...

Guide on making an API call using AJAX from an HTML page in ASP.net

Starting off with ASP.net API, I am attempting to make AJAX calls from my HTML page to retrieve a list of products and search for specific products by their IDs. However, my GET request and the search by ID request do not seem to be functioning properly. ...

Exploring the concepts: AngularJS and the significance of undefined, null,

Take a look at this code snippet: <div ng-controller="SomeCtrl"> <div ng-show="someVariable.someProperty">Value of someProperty is set</div> </div> So, if I set $scope.someVariable.someProperty = 1; in my SomeCtrl controller, ...

Establish a vertical column that matches the height of its parent element

Is there a way to create a column that matches the height of its parent element? I have a navbar followed by a container with three columns. The challenge is to make the last right column the same height as its parent and also scrollable. In this scenario, ...

Receiving an error when attempting to inject the Router in a component constructor without using the elvis operator

Upon launching my app, I desire the route /home to be automatically displayed. Unfortunately, the Angular 2 version I am utilizing does not support the "useAsDefault: true" property in route definitions. To address this issue, I considered implementing th ...

Ways to ensure CSS affects icon inside main element?

Struggling to match the background color of Material-UI icons with the rest of the list items on hover. The CSS is not applying to both the icon and text despite styling the overall class (className= "dd-content-item"). Any assistance would be greatly appr ...

I prefer using both title and image for UIButton, with the title appearing before the image

https://i.sstatic.net/O3G1q.png My requirement is for the title "Alert" to be displayed before the image of the Bell icon. ...

How to create ::after pseudo-element with identical width as its preceding sibling

My HTML code includes a <div> container with an <img> and an ::after pseudo-element. Check it out: <div class="container" data-caption="The caption should match the width of the image and wrap accordingly"> <img> </div> . ...

When utilizing customize-cra to modify antd less variables, it results in the generation of numerous redundant CSS files during the build

While utilizing customize-cra to override antd less variable, I have encountered an issue where it generates multiple duplicate CSS files during the build process. According to the documentation provided by antd, if I opt for the default import of CSS by ...

Conceal the tab bar within an iOS Swift application

Currently, I am exploring ways to conceal the tab bar in my iOS Swift application. My main focus is on simplicity, I do not require any fancy animations or additional features. Ideally, I'm looking for a straightforward method that can be implemented ...

Attain three images with precise dimensions using CSS

Having trouble fitting 3 images in the same row? The issue arises when the images have different sizes, causing everything to shift. Any advice on how to address this problem? Thank you. HTML: <div class="first-slot"> <di ...