<input id="customize1" class="customize1" name="test" type="radio" checked="checked">
<input id="customize2" class="customize2" name="test2" type="radio">
Can these two elements be styled without directly targeting their labels, using only CSS along with HTML and images?
I attempted to utilize input[type=radio]::after, but it doesn't appear to be effective. However, I have discovered a neat little workaround that functions in all modern browsers:
Add a <span> after each radio button, with no spaces in between. Although this span is positioned above the input, the input remains clickable due to pointer-events: none (please note that this is not supported in older versions of IE).
You now have the ability to customize the buttons however you desire:
span.customRadio {
display: none;
}
input[type="radio"] {
width: 16px;
height: 16px;
margin: 0;
cursor: default;
}
input[type="radio"] + span.customRadio {
display: inline-block;
width: 16px;
height: 16px;
background-color: white;
margin: 0 0 0 -16px;
border-radius: 50%;
box-shadow: 0 0 3px -1px rgba(0, 0, 0, 0.8);
pointer-events: none;
}
input[type="radio"] + span.customRadio::after {
content: '.';
color: transparent;
position: absolute;
display: block;
width: 2px;
height: 2px;
margin: 7px 0 0 7px;
opacity: 0.6;
border-radius: 50%;
transition: .2s;
}
input[type="radio"]:checked + span.customRadio::after {
width: 10px;
height: 10px;
margin: 3px 0 0 3px;
opacity: 1;
background-color: #3388ff;
box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
}<input name="test" type="radio" checked="checked"><span class="customRadio"></span>
<input name="test2" type="radio"><span class="customRadio"></span><br><br>
See it in action:<br>
<input name="test3" type="radio"><span class="customRadio"></span>
<input name="test3" type="radio"><span class="customRadio"></span>
<input name="test3" type="radio"><span class="customRadio"></span>Here is a way to customize the styling:
input[type='radio'] {
background: none;
opacity: 0;
}
.custom-checkbox_outer {
position: relative;
float: left;
margin-right: 5px;
}
input[type='radio'] + span {
position: absolute; top:0; left:0; right:0; bottom:0; background-image: url('http://s28.postimg.org/oggskkn6x/controls.png'); background-repeat: no-repeat;}
input[type='radio'], .custom-checkbox_outer {
height: 16px;
width: 16px;
position: relative;
z-index: 10;
}
/*Custom Radiobutton*/
input[type='radio']+span {
background-position: -32px 0;
}
input[type='radio']:checked + span {
background-position: -48px 0;
}
input[type='radio']:hover:checked + span,
input[type='radio']:focus:checked + span {
background-position: -48px -16px;
}
input[type='radio']:hover + span,
input[type='radio']:focus + span {
background-position: -32px -16px;
}
input[type='radio']:disabled + span {
background-position: -32px -32px;
}
input[type='radio']:disabled:checked + span {
background-position: -48px -32px;
}
input[type='radio']:hover:disabled + span,
input[type='radio']:focus:disabled + span {
background-position: -32px -32px;
}
input[type='radio']:hover:disabled:checked + span,
input[type='radio']:focus:disabled:checked + span {
background-position: -48px -32px;
}
input[type='radio']:active + span {
background-position: -32px -48px;
}
input[type='radio']:active:checked + span {
background-position: -48px -48px;
}<strong>Custom Radio buttons </strong>
<br />
<div class="custom-checkbox_outer">
<input id="ID5" type="radio" name="NAME5" checked><span></span>
</div>Checked
<br />
<div class="custom-checkbox_outer">
<input id="ID5" type="radio" name="NAME5"><span></span>
</div>Not checked
<br />
<div class="custom-checkbox_outer">
<input id="ID6" type="radio" name="NAME6" checked disabled><span> </span>
</div>Checked & disabled
<br />
<div class="custom-checkbox_outer">
<input id="ID6" type="radio" name="NAME6" disabled><span></span>
</div>Not checked & disabled
<br />Using labels can simplify styling and customization.
Customize your radios here
here is a suggestion
input[type=radio]:not(old) {
width: 23px;
height: 23px;
display: inline-block;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
border-radius: 1em;
border: 2px solid #01a982;
outline: none !important;}
input[type=radio]:not(old):checked{
background-image: radial-gradient(circle at center, #fff, #fff 37.5%, #01a982 40%, #01a982 100%);
outline: none;}
I am attempting to automate a download process on a webpage using selenium. Upon clicking a button, a blank popup window appears. After approximately 60 seconds, a link appears within the popup that I want to click on. The code snippet below outlines my ap ...
After writing the code, I noticed a bug in Firefox and a small bug in Chrome. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ...
My goal is to incorporate a left and right menu alongside a main feed in the center. However, I'm encountering an issue where the left and right menus are scrolling with the scroll bar. Ideally, I would like the main feed to scroll with the bar while ...
Having trouble with intellisense inside HTML for a simple page component. Also, renaming properties breaks the code instead of updating references. Typescript version: 4.8.4 Below is the code snippet: <script lang="ts"> import type { Bl ...
Utilizing a react-bootstrap Popover component, I have implemented custom styling for the arrow with a gray color and 50% opacity. The CSS code that enables this customization is as shown below: .popover .popover-arrow::before, .popover .popover-arrow::afte ...
Html <p-table #dt1 [columns]="cols" [value]="cars1"> <ng-template pTemplate="header" let-columns> <tr> <th *ngFor="let col of columns"> {{col.header}} </th> ...
Is there a way to transfer form data from an offline website to a Django view for database storage? I want to fill out a form, save it in local storage, and then upload the data to the database when I reconnect to the internet. Is there a tutorial or can ...
Hey there! I'm new to web design/development and I've been working on a simple website to get the hang of things. I managed to make my webpage look good at full screen, but as soon as I resize the window, everything starts shifting around and it ...
Within my Angular application, I have defined an object structure like this: export class Article { id: number; author: number; title: string; content: string; date: Moment; readingTime: number; draft: boolean; constructor(obj: Partial< ...
Can you explain the distinction between serif and sans-serif when it comes to the CSS font-family attribute? ...
Looking for assistance with my file uploading system. I am utilizing a unique purple button from http://tympanus.net/Development/CreativeButtons/ (Scroll down to find the purple buttons). Additionally, I am using a wide, short content popup feature availa ...
Looking for a way to display an element (such as a div) when the user scrolls without using JQuery? Here's an example that tries to achieve this: var scroll = document.body.scrollTop; var divLis = document.querySelectorAll("div"); for(let i = 0; i ...
Utilizing the Material UI Typography element with the css class MuiTypography-h1, I am seeking to globally disable its usage throughout the entire codebase. <Typography variant="h1" sx={{ width: '100px', height: '55px ...
On my website, there is a dynamic element that displays a table when values are present and hides it when there are no values. The values in the table are color-coded to represent different definitions. I wanted to add hover text with a color key for these ...
Here is a snippet of my HTML code: <body ng-controller="StoreController as store"> ........... <section ng-controller="PanelController as panel"> <ul class="nav nav-pills""> <li ng-class="{active:panel.isSe ...
This is the HTML/EJS code snippet: <div class="Edit-Panel" style="display: none;"> <div class="Edit-Wrapper"> <div class="Editing"> <p class="Edit-Header ...
Using AngularJS version 1.5.6, I encountered a bug in my large application due to the default behavior of trimming input for text type inputs. Wanting to change this behavior globally without manually updating every textarea and text input element, I am se ...
As I work on designing a straightforward website, I find myself grappling with CSS and particularly inheritance. My objective is to create a side menu where items are stacked vertically: #inner-flex-container { display: flex; flex-direction: column; ...
Ensuring that the form on this site successfully sends the name and phone number is crucial. However, upon clicking the send button, I encounter an empty modal window instead of a response indicating whether the data was sent or not. The contents of the fi ...
I am currently working on a dynamic pickup date form that utilizes radio buttons. My goal is to change the style of the selected value when a user clicks on it. Below is the code I have tried, but it has not been successful: foreach ($period as $day){ ech ...