The custom radio button options are not currently in view

I'm interested in personalizing my radio buttons to have a unique appearance. Here is the CSS and HTML code I am using:

HTML:

<div class="buttonSlider">
    <input type="radio" value=".."></input>
    <input type="radio" value=".."></input>
    <input type="radio" value=".."></input>
</div>

CSS:

.buttonSlider {
    font-size: 250%;
    background: #ccffdd;
}

.buttonSlider input[type="radio"] { /* hide radio buttons */
    display: none;
}

.buttonSlider label {
    display:inline-block;
    background-color:#ddd;
    padding:4px 11px;
    font-family:Arial;
    font-size:16px;
}

.buttonSlider input[type="radio"]:checked + .buttonSlider label { 
    background-color:#bbb;
}

Unfortunately, after applying this CSS to the radio buttons, they are not visible. Can someone explain where I might be going wrong? I'm fairly new to working with CSS.

htmlcssradio-buttoncustom-controlsradio-group

Answer №1

Check out this alternative solution that doesn't use checkboxes. It might be helpful!

http://jsfiddle.net/zCBBf/1/

.radio-box
{
background-color:black;
height:53px;
width:535px;
padding:4px;
}

.radio-box label {    
  display:inline-block;
  background-color:#ddd;
  padding:17px 60px;
  font-family:Arial;
  font-size:16px;
}
input[type="radio"] {
  display:none;
}

.radio-box input[type="radio"]:checked + label{ 
  background-color:red;
}

Answer №2

Make sure the following CSS is applied:

.buttonSlider input[type="radio"]:checked + label { 
   background-color:#bbb;
}

It seems like you have added this to hide the radio buttons:

.buttonSlider input[type="radio"] { /* don't show the radio check items */
  display: none;
}

In order to fix the issue, remove the "display:none;" rule as well.

You can refer to this example for a better understanding:

http://jsfiddle.net/JSWorld/zCBBf/

Answer №3

Give this a shot:

<head>
    <title></title>

    <style>
        .buttonSlider 
        {
        background-color: #800001;
        }
        .buttonSlider .radiobox
        {
            height: 20px;
            width: 100px;
            border: 1px solid black;
            background-color: #800001;
            float: left;
        }
        .buttonSlider input
        {
            display: none;
        }
    </style>


    <script src="Scripts/jquery-1.10.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(document).ready(function () {
            $('.buttonSlider input').replaceWith('<div class="radiobox"> <input type="radio" name="radio1" value=".."/></div>');
            $('.buttonSlider input').prop('checked', false);
            $('.radiobox').click(function () {
                var this_div = $(this);
                if (this_div.find('input').is(':checked')) {
                    this_div.find('input').prop('checked', false);
                    this_div.css({ 'background-color': '#800001' });
                }
                else {
                    this_div.find('input').prop('checked', true);
                    this_div.css({ 'background-color': '#808080' });
                }

            })
        })
    </script>
</head>
<body>
    <div class="buttonSlider">
        <input type="radio" value=".." name="radio1" />
        <input type="radio" value=".." name="radio1" />
        <input type="radio" value=".." name="radio1" />
    </div>
</body>
</html>

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

Display "No results found" on the auto-complete search list when the specified element does not exist

If the element does not exist in the "ul list," I want my search code (autocomplete on an input field) to display a message like "no match found" as a div tag or some other form of notification. How can I achieve this? Do I need to implement a different ...

javascripthtmlsearchautocomplete

Utilize jQuery to modify or delete CSS styling

For a website I'm working on with Elementor, the CSS it generates looks like this: .elementor-3440 .elementor-element.elementor-element-8fae002 .elementskit-navbar-nav > li.current-menu-item > a { color: var( --e-global-color-accent ); } Ho ...

htmljquerycss

Parent window login portal

I have just started learning how to program web applications, so I am not familiar with all the technical terms yet. I want to create a login window that behaves like this: When a user clicks on the Login button, a window should pop up on the same page t ...

javascriptphpjqueryhtml

Choosing an element in JQuery based on the value of its style property

I have three divs with the same class but different styles. I need to select only the third one using JQuery. <div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-div ...

javascriptjquerycss

Is there a way in JavaScript to prevent the enter key from triggering a mouse click event?

I am facing an issue with my program where I have multiple clickable buttons and the ability to submit by pressing the enter key. However, when I click several buttons with the mouse and then press enter, it not only submits the form but also acts as if ...

javascripthtmlvisual-studiobuttonaddeventlistener

What could be causing my col-8 to not align perfectly in the center of the grid system?

Recently, I've been delving into tutorials on how to utilize bootstrap4 and have been experimenting with the grid system. However, I've encountered an issue where my layout is not aligned in the center as intended. Here's a snippet of my cod ...

htmlbootstrap-4centeringcol

Boost the dimensions of the content property within a CSS class

I am currently using the content property to display a dashed arrow "-->" in my CSS class. However, the arrow appears very small and I would like to increase its size directly in the CSS class itself. This arrow is meant to be displayed before each elem ...

htmlcss

The file directory usr/local/bin is missing htmltidy linter

I just added a couple of linters for sublimelinter, and they all seem to be functioning properly except for htmltidy. I followed the installation instructions in the terminal (I'm using OSX) like this: sudo npm install -g htmltidy While this method ...

htmlnpmsublimetexthtmltidysublimelinter

Generate selection choices by looping through a JSON document

I am attempting to develop a search box that will provide autocomplete suggestions based on user input from a key-value pair in a json file. I initially thought using datalist would be the most suitable approach for this task, however, upon running the cod ...

javascriptjqueryjsonhtml

Execute AJAX request for two individual buttons

I have a scenario where I want to use two buttons to open separate PHP pages, but I would like to trigger both buttons with a single function. The AJAX function should then determine which button was clicked and open the corresponding PHP page - for exam ...

javascriptphphtmljqueryajax

I'm having trouble getting the height of my div element to render in percentage (%) in the CSS. Can anyone assist me with this issue?

When I try to set the "height" CSS property in percentage (%) for a div element, the HTML doesn't render anything. However, if I set the "height" CSS property using length values such as px or cm, it works perfectly fine. Can anyone provide assistance ...

htmlcss

Incorporating JSON data into data-groups within an Ionic application

I am currently working on developing an Ionic app using the newest version (Ionic 3xx and Angular 5) and I am attempting to incorporate the shuffleJS feature for filtering. Everything was working fine when I used static data in my template with the 'd ...

jsonhtmlangularionic-framework

What steps can I take to address the issue with the jquery dropdown?

I am struggling with implementing JavaScript functionality on my website. Specifically, I have a dropdown menu in the hamburger menu that is causing some issues. Whenever I click on the services option, the dropdown opens but quickly closes again. I'v ...

javascripthtmljquerycssnavbar

Prevent the occurrence of a page break in between dt and dd elements

There are multiple instances of <dd> and <dt> elements in a specific order on this page. For instance: <dt> "Here is some random text" </dt> <dd> <input type="text"> <span></span> </dd> This str ...

htmlcss

Tips for preserving additional information in a form by selecting "add more" option

Recently, I encountered a challenge with a form on my website. Whenever a user fills out a few fields and clicks "Add", the data transitions into an HTML element. Subsequently, the form partially clears for more data input. Now I'm faced with the dil ...

javascriptjqueryhtmlformsserialization

Execute PHP script through jQuery request within the context of a Wordpress environment

I want to replicate a specific functionality in WordPress. In this functionality, jQuery calls a PHP file that queries a MySQL table and returns the result encapsulated within an HTML tag. How can I achieve this? <html> <head> <script ...

javascriptphpjqueryhtmlwordpress

Show user image on navigation bar

I've been working on creating my own blog website. Initially, I was able to allow users to upload their profile picture and have it displayed next to their posts. Now, I want that same image to appear in the navigation bar as a profile image. However ...

htmlcssdjangopython-3.xbootstrap-4

Using Javascript to access the index of an element that has been checked and

I am working on a dynamic feature that involves a JavaScript variable called 'options'. This variable is designed to store and update a string with the .innerHTML content of every checkbox checked by the user. For instance, if the user checks Ins ...

javascripthtmlcss

When an HTML email is sent from the Outlook 2007 Exchange server, it may appear as plain text when viewed on

After extensive searching, I've come across two old threads with unanswered questions on this topic. In our office, we have a Windows XP PC designated for "production" that sends out emails in HTML format. These emails contain multiple excel Cells for ...

htmliphoneemailplaintext

Enabling visibility of overflowing text in dynamically inserted divs without using scroll bars

Is there a way to set the text overflow to visible without scroll bars in dynamically added <div>s? Despite what the documentation says, it doesn't seem to be the default behavior and I'm struggling to understand why. Adding text directly t ...

javascripthtmlcssoverflow