visuals in lieu of radio buttons

Question

visuals in lieu of radio buttons

Currently, I am working on customizing my radio buttons and I want to find a way to add images for both the checked and unchecked events without any compatibility issues across different browsers. I have tried various methods, but each one comes with its own set of drawbacks. Ultimately, I want to achieve this using CSS only, as I have already done it successfully using jQuery but encountered some issues such as needing a label for each radio button and always floating to the left.

I would appreciate your assistance in this matter. Thank you

html css forms webforms

Answer 1

Answer №1

Styling radio buttons using CSS:

input[type="radio"] {
    display:inline-block;
    height:20px;
    text-indent:-9999px;
    width:20px;
}

input[type="radio"], .notchecked {
    background:url("notchecked.png") 0 0 no-repeat;
}

input[type="radio"]:checked, .checked {
    background:url("checked.png") 0 0 no-repeat;
}

To ensure compatibility with older browsers, include this jQuery script:

$("input[type=radio]").on("change", function(){
    if($(this).is(":checked")) {
        $(this).addClass("checked");
    }
    else {
        $(this).removeClass("checked");
    }
});
$("input[type=radio]:checked").addClass("checked");

Here is the corresponding HTML code:

<input type="radio" class="notchecked" value="true" />

Answer 2

Styling radio buttons using CSS:

input[type="radio"] {
    display:inline-block;
    height:20px;
    text-indent:-9999px;
    width:20px;
}

input[type="radio"], .notchecked {
    background:url("notchecked.png") 0 0 no-repeat;
}

input[type="radio"]:checked, .checked {
    background:url("checked.png") 0 0 no-repeat;
}

To ensure compatibility with older browsers, include this jQuery script:

$("input[type=radio]").on("change", function(){
    if($(this).is(":checked")) {
        $(this).addClass("checked");
    }
    else {
        $(this).removeClass("checked");
    }
});
$("input[type=radio]:checked").addClass("checked");

Here is the corresponding HTML code:

<input type="radio" class="notchecked" value="true" />

visuals in lieu of radio buttons

Answer №1

Similar questions

Using Django to stream H.264 video files with FileWrapper through HTML5

Creating a thumbnail with a close button using an image

Responsive design breaks down on smaller devices

Display the chosen rows from an HTML table

AngularJS: Error - Undefined value instead of a function argument

Accessing array values depending on DOM response

Show Excel spreadsheet in a drop-down menu

Implementing Dynamic Parent Node Manipulation with Button Clicks in JavaScript

Using jQuery for transferring data from one page to another resulted in an undefined index error in PHP MySQL

ChartJS is exhibiting an issue within a modal or popup window where the chart is being displayed with a height

Issue with activation of onClick event in case/switch statement

the ajax success function is malfunctioning

Creating dynamic pie charts with animated effects using JavaScript

Image not appearing when sharing on Facebook

A versatile function that displays a loading icon on top of a specified div

Ajax is able to fetch the URL without any issues, but the page is not being updated as expected. Instead,

Utilize JavaScript to extract an image from an external URL by specifying its attributes (id, class)

Tips for ensuring your webpage stays current with regular updates through JavaScript

jQuery is an excellent tool for implementing drag and drop folder upload functionality, all without

Modify the content of an element upon hovering over a different element