Customizing the appearance of a radio button within a form

Question

Customizing the appearance of a radio button within a form

I need assistance with styling a form that contains a radio button. I'm looking to customize the appearance of the radio button by adding a background image and also changing the default view of the check image. Additionally, I want the form to be centered on the screen and highlighted with a line. My code can be found on jsfiddle:

           <style>
                form{
                    font-size: 200%;
                    font-family: "Courier New", Monospace;
                    display: inline-block;
                    align: middle;
                    text-align: center;
                    font-weight: bold; 
                     background-size: 20px; 
                }     

                input[type="radio"] {
                      width: 26px;
                      height: 26px;
                      background: url(check.png) no-repeat;

                }

                </style>

http://jsfiddle.net/chrathan/q1mnq2os/2/1

I am seeking guidance on how to achieve these customizations.

css html forms radio-button

Answer 1

Answer №1

Here's a suggestion:

*{box-sizing: border-box}
form{
    font-size: 200%;
    font-family: "Courier New", Monospace;
    text-align: center;
    font-weight: bold; 
    width: 320px;
    margin: 0 auto;
    background-size: 20px; 
}     

input[type="radio"] {
    width: 26px;
    height: 26px;
    visibility: hidden;
    display: none
}
label{
    position: relative;
    margin-right: 40px
}
label:after{
    content: '';
    position: absolute;
    right: -40px;
    top: 0;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border: 2px solid blue;
    border-radius: 50%;
}
input[type="radio"]:checked + label:after{
    background: red; /*add your background image here*/
}

<form class = "form"  action="action2.php"  method="post">
    
    <a href=' .$user. ' style=\"text-decoration:none;\"> "' .$user. '" </a><br><br>
    <p>
        <input   type="radio" name="classif" id="C1" value="true" checked="checked" hidden />
        <label for="C1">FASHION</label>
    </p>
    
    <p>
        <input type="radio" name="classif" id="C2" value="false" hidden />
        <label for="C2"> NON FASHION </label>
    
        <input type="hidden" name="imageName" value="' . $line . '">
    </p>
    
    <input   type="submit"   value="submit"  />
    </form>;

Answer 2

Here's a suggestion:

*{box-sizing: border-box}
form{
    font-size: 200%;
    font-family: "Courier New", Monospace;
    text-align: center;
    font-weight: bold; 
    width: 320px;
    margin: 0 auto;
    background-size: 20px; 
}     

input[type="radio"] {
    width: 26px;
    height: 26px;
    visibility: hidden;
    display: none
}
label{
    position: relative;
    margin-right: 40px
}
label:after{
    content: '';
    position: absolute;
    right: -40px;
    top: 0;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border: 2px solid blue;
    border-radius: 50%;
}
input[type="radio"]:checked + label:after{
    background: red; /*add your background image here*/
}

<form class = "form"  action="action2.php"  method="post">
    
    <a href=' .$user. ' style=\"text-decoration:none;\"> "' .$user. '" </a><br><br>
    <p>
        <input   type="radio" name="classif" id="C1" value="true" checked="checked" hidden />
        <label for="C1">FASHION</label>
    </p>
    
    <p>
        <input type="radio" name="classif" id="C2" value="false" hidden />
        <label for="C2"> NON FASHION </label>
    
        <input type="hidden" name="imageName" value="' . $line . '">
    </p>
    
    <input   type="submit"   value="submit"  />
    </form>;

Answer 3

Answer №2

Aligning a form in the center:

To align the form in the center, you can do the following:

display:inline-block

Replace the above code with:

margin:0 auto

This will center the form on the page.

Check out the updated jsfiddle here.

Here is a helpful resource for styling radio buttons.

Answer 4

Aligning a form in the center:

To align the form in the center, you can do the following:

display:inline-block

Replace the above code with:

margin:0 auto

This will center the form on the page.

Check out the updated jsfiddle here.

Here is a helpful resource for styling radio buttons.

Customizing the appearance of a radio button within a form

Answer №1

Answer №2

Similar questions

Guide to centering a list on a webpage using Bootstrap 3

Steps to creating a popup within an HTML page from another HTML page

Is there a way to set the starting position of the overflow scroll to the middle?

jQuery UI - Add character right before the final element

Adjusting the position of the parent div by manipulating the bottom property

Utilize API or alternative methods for analyzing Instagram data

Can the content inside HTML tags be susceptible to XSS attacks?

The act of resizing a window causes the text to be forcibly expelled from its containing div

Blazor Razor Component Library (RCL) Lacks CSS IntelliSense

Adjustable background image with no need for a scroll bar

"Capture input value changes and display the previous value when submitting a post. See an example of

Having trouble retrieving alert message after submitting form using jquery

The hover drop-down menu in CSS is not appearing in the correct position

Modify the text when clicked on, but do not change the span

The issue with HTML5 anchor download attribute for saving files cannot be resolved

Stop SCSS from processing CSS variables in Angular-CLI

How can I populate a <select> tag with options dynamically using C# when the page loads?

Ways to resolve the issue of truncated lines while displaying HTML content in WebView on Android devices

The CSS provider for Gtk+3 is malfunctioning

Conflict between jquery and hoverIntent libraries