CSS - Radio buttons featuring closely spaced circular options

I am attempting to create small circles that act like radio buttons without any spacing between them. I was successful in achieving this, but I ran into issues with removing the space between the circles. The margin between two circles should be limited to 1px and their width and height should not exceed 8px each.

Below is the code:

<input type='radio' name='a' checked/>
<input type='radio' name='a'/>

input[type='radio'] {
    -webkit-appearance:none;
    width:8px;
    height:8px;
    border:1px solid darkgray;
    border-radius:50%;
    outline:none;
    box-shadow:0 0 5px 0px gray inset;
}
input[type='radio']:hover {
    box-shadow:0 0 5px 0px orange inset;
}
input[type='radio']:before {
    content:'';
    display:block;
    width:100%;
    height:100%;
    /*margin: 20% auto;    */
    border-radius:50%;    
}
input[type='radio']:checked:before {
    background:green;
}

input[type='radio']:before {
    content:'';
    display:block;
    width:100%;
    height:100%;
    /*margin: 20% auto;    */
    border-radius:50%;    
}

Answer №1

To optimize the radio buttons, make sure to eliminate the margin and set a 1px distance to the right. Removing any white space between the two inputs will also help reduce excess space.

input[type='radio'] {
    -webkit-appearance:none;
    width:8px;
    height:8px;
    border:1px solid darkgray;
    border-radius:50%;
    outline:none;
    box-shadow:0 0 5px 0px gray inset;
    margin: 0 1px 0 0;
}
input[type='radio']:hover {
    box-shadow:0 0 5px 0px orange inset;
}
input[type='radio']:before {
    content:'';
    display:block;
    width:100%;
    height:100%;
    /*margin: 20% auto;    */
    border-radius:50%;    
}
input[type='radio']:checked:before {
    background:green;
}

input[type='radio']:before {
    content:'';
    display:block;
    width:100%;
    height:100%;
    /*margin: 20% auto;    */
    border-radius:50%;    
}
<input type='radio' name='a' checked/><input type='radio' name='a'/>

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

Change URL link after login user with javascript

Is there a way to generate a URL link based on the user's name (gmail)? For example: The code below is somewhat suitable for my needs. However, I am trying to figure out how to automatically retrieve the username and populate it in the input field. ...

Arranging the data in the table by alternating rows using Datatables

I need to organize my data in a way that includes an additional row for descriptive information, but this particular row should not be sorted. It is crucial for understanding the rest of the data, so hiding or showing it is not an option. Is it possible t ...

Locate the checkbox label using CSS

Is there a way to replace the standard checkboxes with font-awesome icons without modifying the generated HTML or using jQuery? EDIT: The code includes JavaScript that prevents me from making changes. Also, note that the label text class can be -1 or -2 a ...

Arrange divs in a stack fashion

Currently, I have a table-styled three-column set of divs. I would like these columns to stack vertically on mobile devices. I think this can be achieved using the float method, but the titles and descriptions for each column are in separate rows (divs), ...

Stylesheets may not display correctly in Firefox and IE

Just wanted to say that I recently put together this little website , but I am completely stumped on why the CSS file won't show up in Firefox or IE. I know it's a basic question, but I'm still learning all of this. Thank you so much for a ...

Getting text between Span tags using Selenium in Python

Struggling to extract the name "Margaret Osbon" from the following HTML using Python and Selenium. Despite trying different techniques, the printed output always comes out blank. <div class="author-info hidden-md"> By (autho ...

Is there a simple way to create a row of triangle-shaped divs using Bootstrap, similar to the design shown

Is it possible to have a white section and background image in the same row? I am aiming for a layout similar to the example shown https://i.stack.imgur.com/J0S2t.jpg ...

The PHP "include" function seems to be malfunctioning when used inside

Hey there! I'm trying to incorporate an echo statement that includes a variable along with some CSS and an image, but for some reason it's not working as expected. Can anyone lend a hand? <?php if (isset($_POST['sharebutton'])) ...

Resetting the quiz by utilizing the reset button

Hello everyone, I'm new to this platform called Stack Overflow. I need some help with my quiz reset button. It doesn't seem to be working as intended. According to my code, when the reset button is clicked at the end of the quiz, it should bring ...

Retrieving Table Cell Values Using Jquery: A Step-by-Step Guide

<table class="table" align="center" id="tblMain"> <tr> <td>Status</td> <td><b><span name="current" value="Dispatch">Dispatch</span></b></td> </tr> </table> JS $(&apos ...

Troubleshooting: Unable to preview Facebook Page plugin

When I visit the Facebook developer site to get the code for a Facebook page plugin, I use this link. The preview feature works perfectly with pages like "facebook.com/Nike", but when I try it with my own page, "facebook.com/BargainHideout", it doesn&apos ...

extract the text content from an object

I am trying to add an object to the shopping cart. The item contains a key/value pair as shown in the following image: https://i.stack.imgur.com/5inwR.png Instead of adding the title with its innerText using p and style, I would like to find another ...

Dropped down list failing to display JSON data

I created a website where users can easily update their wifi passwords. The important information is stored in the file data/data.json, which includes details like room number, AP name, and password. [ {"Room": "room 1", "AP nam ...

Adjust the size and alignment of columns within a Bootstrap table by incorporating a nested table

My goal is to adjust the size and alignment of the header components within the thead section of an HTML table to match those of a nested table. The main table handles the alternating row colors, while the nested table enables me to organize the fields ac ...

PHP causing SQL hiccup

Hey everyone, I've been struggling with this PHP code that keeps giving me an error when trying to add students. Check out the code snippet below: https://i.sstatic.net/EW7oM.png And here's the error message it's showing: https://i.sstat ...

Tap the mobile menu button twice to toggle the menu

Incorporating: Visual Studio 2013, ASP.NET (VB) Webforms. Upgrading an existing WebForms website from .NET 2.0 to .NET 4.5 and implementing mobile-friendly features for better Google support. I have added a button to the top right corner as follows: < ...

Streaming live video on the website

Hi there! I'm looking to integrate live video capturing into an HTML/JavaScript site for a presentation. However, I'm not sure where to start my search. Can anyone point me in the right direction? :) The live video will be captured by a camera o ...

Broken links preventing page navigation

As embarrassing as it is, I seem to have forgotten the basics of linking pages in HTML. I've been focusing so much on CSS that now, when it's time to create a website with multiple pages, I'm stumped. The links in my navbar aren't worki ...

transferring background-image in html between elements

Imagine having a three-level hierarchy HTML code structured like this: <section> <div id="outer"> <div id="inner"> </div> </div> </section> If we set background-image:someImage.jpg to the section, and backg ...

Choosing radio buttons within rows that contain two radio buttons using ngFor

This section showcases HTML code to demonstrate how I am iterating over an array of objects. <div class="row" *ngFor="let item of modules; let i = index;"> <div class="col-md-1 align-center">{{i+1}}</div> <div class="col-md- ...