Customize your radio buttons to display as stylish boxes with Bootstrap

Check out my Fiddle here...

The radio buttons are displaying correctly in the fiddle.

<div class="element-radio" title="Do you want to float the text to the left, right, or not at all?"><h4 class="title" style="font-weight: bold;">Float (left, right or none)</h4>       
    <div class="column column3">
        <label>
            <input type="radio" name="radio" value="Left" />
                <span>Left</span>
        </label>
    </div>
    <span class="clearfix"></span>
    <div class="column column3">
        <label><input type="radio" name="radio" value="Right" />
            <span>Right</span>
        </label>
    </div>
    <span class="clearfix"></span>
    <div class="column column3">
        <label>
            <input type="radio" name="radio" value="None" />
                <span>None</span>
        </label>
    </div>
    <span class="clearfix"></span>
    </div>

However, when I view the website I'm working on, located here, the radio buttons appear as small boxes and are unresponsive.

This is the Bootstrap CDN that I am using -

Strange thing is, the website functions properly locally but not once it's uploaded to the server.

Any solutions or suggestions?

Answer №1

Sorry, but the reference you are using to load this file is invalid.

file:///C:/Users/jnewnam/Documents/EDMC%20App%20Portal%20Redo/Formoid/html/logi‌​n_files/formoid1/formoid.ttf`

Answer №2

To make the radio buttons visible on your webpage, simply remove the opacity: 0.01; line from the specified class in your styles.css file:

.formoid-metro-cyan input[type="checkbox"], .formoid-metro-cyan input[type="radio"] {
    z-index: 1;
    position: absolute;
    float: left;
    width: 1em;
    height: 1em;
    font-size: 1em;
    /* Removing opacity will show the radio buttons */
    margin: 0px;
    cursor: pointer;
}

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

Creating animations with an svg mask can be effective, however, it seems to only work properly

I have been experimenting with creating a transition effect using SVG masks and CSS. Initially, everything was working as intended, but after a few repetitions (usually 1 or 2, unpredictably), the transition effect would suddenly stop and become instantane ...

Error: Unable to call topFrame.window.changeSelectedBarStyle because it is not a valid function. What could be causing this

This function is called changeSelectedBarStyle: function changeSelectedBarStyle(tdId){ $("#menuTable td").each(function(index){ if(this.id == tdId){ $(this).removeClass("menuPanel"); $(this).addClass("menuPanelSelected" ...

Scroll bar in Highstock does not completely cover the entire length when dealing with multiple series

Having trouble with the scrollbar on a multi-series line chart where the x-axis represents dates. It seems that the maximum length of the scrollbar is determined by the length of the first, older series. When clicking the 'All' button in the ran ...

Centered header with underline styled using CSS pseudo element

I have centered heading text in a container, and I am using a border-bottom and pseudo element to create an underline effect. However, I am uncertain about how to make the underline stop at the end of the heading text. Here is my code: .headerWrap { ...

Exploring Nested CSS Grids and Resizing Images on the Web

Having an issue resizing images in CSS Grid. I set up a main layout with 2 columns, and within the first column is another grid where I intended to place an image and some text. Please remove the html comment so you can see the image. The problem lies i ...

Events related to key press timing in HTML 5 canvas

Currently, I am developing a game similar to Stick Hero for Android using HTML5. I am working on the code that will capture the time of key press (specifically the right arrow key with ASCII 39) in JavaScript and expand a stick accordingly. <!doctype h ...

Tips for arranging a menu horizontally with buttons in CSS

I am currently working with a dropdown menu that I coded using CSS, similar to the one shown at . My issue is that I have 4 menu items and I want the total width of the parent div to be divided equally among each item, regardless of the resolution. Curre ...

Ways to ensure that the dropdown content remains visible even after the mouse has exited the trigger element

There are three buttons arranged in a row, and when one is hovered over, dropdown content appears underneath all three buttons. However, the content disappears when the mouse moves down to it. Unfortunately, images cannot be posted inside yet** https://i.s ...

Connecting a checkbox to a text field in HTML and PHP

Is it possible to create a connection between a checkbox and a textbox? For instance <form> <table> <tr> <td><input name="databaseIDs[]" type="checkbox" value="49"/></td> <td><input type="text ...

What is the best method for sorting comments by ID using jQuery?

I am embarking on a new project to create a filter for comments so that they are displayed with the corresponding post ID. Your help is greatly appreciated! $(function () { $.ajax({ type: "GET", url: "https://jsonpla ...

Is it necessary to regularly update a MySQL table with significant amounts of data every few seconds?

I have developed an application with an automatic save feature, eliminating the need for users to manually click a save button. The settings are saved automatically every time there is an interaction with the app. In the background, I send a POST request t ...

The edges of the cube are not joined together

Looking for a 3D transform cube that can freely flip left and right, with the button fitting into it perfectly. I've found the CSS code to achieve this, but when I set the width of the ".cube" below 200px, the borders of the cube don't connect. I ...

Learn the method for attaching bargraph bars to the bottom without specifying a fixed height

I've been struggling to create a bar graph displaying visitor statistics. The challenge lies in attaching the bars to the bottom without knowing their exact height beforehand. Since my code uses percentages for the height and it fluctuates each time y ...

Footer alignment issue when using react-full-page is causing it to not lineup at the bottom of the page

Currently, I have integrated the react-full-page package into my project. However, after adding the Footer to the routes, I noticed that the footer is only visible in the second section of the page and does not appear at the bottom as expected. If you wan ...

Submenu malfunctioning in Internet Explorer and Chrome, but functioning properly in Firefox and Opera

I've been working on some HTML code that runs perfectly in FF and Opera, and even in IE for my friend. However, I'm having trouble getting the output to display properly in Chrome. Any ideas why this might be happening? <html> <head> ...

Adding Text Above a Material Icon in Angular: A Guide

Here is some sample HTML code to consider: <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <mat-icon class="fa fa-folder" style="font-size:48px;"><span style="color: re ...

When utilizing jQuery to add a <li> element, it suddenly vanishes

? http://jsfiddle.net/AGinther/Ysq4a/ I'm encountering an issue where, upon submitting input, a list item should be created with the content from the text field. Strangely, it briefly appears on my website but not on the fiddle, and no text is appen ...

Is there a way to refresh a webpage without the need to reload it

Imagine a scenario where a tab on a website triggers the loading of a specific part of the webpage placed within a div. For example, clicking on a tab may trigger the loading of a file named "hive/index.php". Now, if a user selects an option from an auto ...

What causes the jQuery.easing error to happen when jquery-ui is being used?

After adding dependencies to achieve the add to cart effect in our project, I checked the package.json and found the following installed: "jquery": "^3.4.1", "jquery-ui": "^1.12.1", I then imported these into the co ...

I encountered an issue with my $.getJSON function in conjunction with PHP Post as it was returning a null value

I am facing an issue with executing a JSON query to a local file. The script I am using is as follows: <script> $('.Import').on('click', function(){ $.getJSON("charFetch.php?name=" + $('.charname').val() + "&rea ...