I am using bootstrap 5 range . I am getting some issues
Why dot displaying in the center of the line? I added the min value of 1
How can I display the value of the range in the input field?
How to change the background color or linear gradient of the line?
.customRange {
-webkit-appearance: none;
width: 100%;
height: 25px;
background: transparent;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.customRange:hover {
opacity: 1;
}
.customRange::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background: #04AA6D;
cursor: pointer;
}
.customRange::-moz-range-thumb {
width: 25px;
height: 25px;
background: #04AA6D;
cursor: pointer;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="w-50 mx-auto">
<div class="d-flex justify-content-between"><label>Range</label>
<div><input type="text" name="" value="">%</div>
</div>
<input type="range" class="form-range customRange" min="1" max="100" oninput="this.nextElementSibling.value = this.value">
<div class="d-flex justify-content-between">
<span>1</span>
<span>100</span>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
You need to use value="1" to intialize your thumb at 1 . Then , write change event on range input and assign value using $(this).val() to your other inputs . I am not sure about 3rd issue because in that docs its written supports "filling" their track.., we do not currently support it....
Demo Code :
$("input[type=range]").on("change input", function() {
$("[name=values]").val($(this).val())//assign value..
})
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="w-50 mx-auto">
<div class="d-flex justify-content-between"><label>Range</label>
<div><input type="text" name="values" value="">%</div>
</div>
<!--use value=1-->
<input type="range" class="form-range customRange" value="1" min="1" max="100">
<div class="d-flex justify-content-between">
<span>1</span>
<span>100</span>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
I'm trying to build a nice responsive login form with bootstrap but I'm facing an interesting issue.
I would like to make the label to move away from the form input when a text is inside it and I can do that! But the problem is that when I click outside of the login form the label goes back to the middle.
How can I force the transition to persist so that when a text is inside my form the label is kept out of the way?
Here is nice gif with the issue to make it easy visualize
here is the fiddle link: https://jsfiddle.net/d10ayfw5/
body {
margin: auto;
padding-top: 30px;
max-width: 300px;
}
div {
margin: 20px 0 20px 0;
}
.form-outline {
position: relative;
width: 100%;
font-size: 1rem;
font-weight: 400;
transition: all .2s linear;
}
.form-control:active~.form-label {
transform: translateY(-1.5rem) translateY(.1rem) scale(.8);
background-color: rgb(255, 255, 255);
}
.form-control:focus~.form-label {
transform: translateY(-1.5rem) translateY(.1rem) scale(.8);
background-color: rgb(255, 255, 255);
}
.form-control~.form-label {
position: absolute;
top: 0;
left: .75rem;
padding-top: .5rem;
pointer-events: none;
transition: all .2s ease-out;
color: rgba(0, 0, 0, .6);
margin-bottom: auto;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<div class="container d-flex align-items-center">
<div class="row">
<div class="col-md-2">
<form>
<div class="form-outline mb-4">
<input type="email" id="form1Example1" class="form-control" />
<label class="form-label" for="form1Example1">
Email address
</label>
</div>
<div class="form-outline mb-4">
<input type="password" id="form1Example2" class="form-control" />
<label class="form-label" for="form1Example2">Password</label>
</div>
<button type="submit" class="btn btn-primary btn-block">
Sign in
</button>
</form>
</div>
</div>
</div>
First you need to add empty placeholder=' ' to input elements.
So you can use :placeholder-shown pseudo-selector, whether or not they have a value.
Also, from the Selectors spec: Selectors spec
input:not(:placeholder-shown) ~ .form-label {
transform: translateY(-1.5rem) translateY(.1rem) scale(.8);
background-color: rgb(255, 255, 255);
}
this solution is css-only and browser-compatible for majors. can-i-use:placeholder-shown
I made a little landing page and the client wants: "The text, Sourcing & Trading, CCTV security. Want to use overstriking.
Then all will be OK." I googled what overstriking is and I have to admit I'm a little hazy on the concept and not sure how to implement it with CSS at.
The code I tried is in the snippet bellow. Thanks in advance.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Welcome</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<style>
footer{
position: fixed;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height:100px;
line-height: 10px; /* Vertically center the text there */
padding-top:10px;
background-color: #f5f5f5;
margin-top: 10px;
}
.main-buttons {
width: 400px;
height: 50px;
margin: 0 auto;
text-decoration: line-through;
}
span{
margin-left: 5px;
margin-top: 5px;
margin-bottom: 5px;
}
.main-container {
background-image: url('http://wenshin.ltd/wp-content/uploads/2018/07/logisticsworldmap-1024x586.png');
height: 100vh;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: 0.9;
filter: alpha(opacity=90); /* For IE8 and earlier */
}
.middle{
top: 50%;
}
.btn-lg {
box-shadow: 3px 3px #888888;
}
h1 {
text-shadow: 1px 1px #888888;
}
.logo {
width: 50%;
}
</style>
</head>
<body class="main-container">
<div class="container middle">
<div class="row ">
<div class="col-md-12 text-center ">
<div class="intro"> <br> <br> <br> <br>
<img src="http://wenshin.ltd/wp-content/uploads/2018/08/WS-01.png" class="img-fluid logo" alt="Logo"> <br> <br>
<h1 class="">WELCOME TO WENSHIN <br> INDUSTRIAL CO LIMITED</h1>
<p>
<a href="http://www.wenshin.ltd/index.php">
<button class=" main-buttons btn btn-light btn-lg mt-3">Sourcing & Trading</button>
</a>
</p>
<p>
<a href="http://www.cctvcamerahd.com/">
<button class="main-buttons btn btn-light btn-lg mt-3">CCTV Security</button>
</a>
</p>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<span class="text-center"><p><strong>Choose your language:</strong></p></span>
<span class="text-center"><p><span>English</span> <span>繁體中文</span> <span>Español</span> <span>Português</span> <span>Deutsch</span> <span>Français</span> <span>Italiano</span> <span>Pусский</span> <span>한국어</span> <span>日本語</span> <span>Nederlands</span> <span>غة العربية
</span> <span>Indonesian</span>
</p></span>
</div>
</footer>
</body>
</html>
I used:
text-decoration: line-through;
And I wondered if that's it or is there something alternative.
First of all, I would ask my client what he means by that.
Most people mean a strikethrough by saying overstrike.
You would just have to add this to your css for these buttons.
text-decoration: line-through;
As for the overstriking, it is an old technique used in the time of typewriters to write letters that where not on the "Keyboard". It doesn't really make sense anymore.
Cheers!
This just in.... I managed to answer my own question.
Since it turns out that (at least for my device) the inline «style» attribute accepts «/**/» comments like its stylesheet cousin, I thought it would be helpful to "good doctor" the code to make it easier to follow:
<p style="text-align: justify;">An element with «position: relative;»
[such as
<span style="/*Block setup*/display: inline-block; position: relative;
/*Adjust to match print baseline*/vertical-align: -7.5%;
/*Block width*/width: 6.5em;">
<span style="/*Element Name*/position: absolute;
left: 0em;">Cæsium (</span>
<span style="/*Isotope weight*/font-size: 60%; vertical-align: 55%;
position: relative;/**/ left: 6.0em;">133</span>
<span style="/*Atomic number*/font-size: 60%; vertical-align: -25%;
position: relative;/**/ left: 4.6em;">55</span>
<span style="/*Element Symbol*/position: relative;
left: 2.5em;">Cs)]</span>
</span> is positioned relative to its normal position:</p>`
The user may need to jiggle about the «width» and «left» properties to smooth out the spacing for their system (as well as prune the comments if storage space us at a premium).
I'm trying to implement a mockup given below, I looked around to find something similar but no luck. Could some one guide me how to do this.
So problem here is need to show static "from" "to" and "90 days" text every time.
Note "From","To","days" and Icon should be inside text box
This is a VERY simple example intended to get you started.
The key point is: use jQuery UI's "datepicker" module. It is powerful - you can auto-calculate the 90 day calc and, upon leaving the Date From field, have it auto-calc 90 days and plunk that date into the From field as a default.
Look how much you get done with how little.
$( ".dp" ).datepicker();
/* */
div{position:relative;box-sizing:border-box;}
.row{overflow:hidden;border:2px solid #aaa;padding:5px;}
.r-left {float:left;width:33%;margin-right:10px;}
.r-right{float:left;width:33%;margin:0 10px;}
.farright{display:flex;height:50px;}
.inlineblock{width:60px;height:50px;margin:auto;flex-flow: row nowrap;justify-content:flex-end;align-content:center;}
<link href="http://code.jquery.com/ui/1.9.2/themes/cupertino/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script
src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"
integrity="sha256-eEa1kEtgK9ZL6h60VXwDsJ2rxYCwfxi40VZ9E0XwoEA="
crossorigin="anonymous"></script>
<div class="row">
<div class="r-left">
<div>FROM</div>
<div><input id="datFrom" class="dp" type="text" /></div>
</div>
<div class="r-right">
<div>TO</div>
<div><input id="datTo" class="dp" type="text" /></div>
</div>
<div class="farright">
<div class="inlineblock">
<br>90 days
</div>
<div class="inlineblock" id="90days">
<img src="http://placeimg.com/50/50/nature" />
</div>
</div>
</div>
I have tweak the code from gibberish and see if this serve your purpose.
and for the label inside textbox set placeholder attribute of input tag
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script
src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"
integrity="sha256-eEa1kEtgK9ZL6h60VXwDsJ2rxYCwfxi40VZ9E0XwoEA="
crossorigin="anonymous"></script>
<script>
$(function() {
$( ".dp" ).datepicker();
});
</script>
<style>
div{position:relative;box-sizing:border-box;}
.row{overflow:hidden;border:2px solid #aaa;padding:5px;}
.r-left {float:left;width:30%;margin-right:10px;}
.r-right{float:left;width:30%;margin:0 10px;}
.farright{float:right;width:30%;margin-left:10px;}
.inlineblock{display:inline-block;color: grey;}
#90days{margin-left:15px;margin-top:-35px;color: red;}
#datFrom{
border: 0px;
}
#datTo{
border: 0px;
}
.floating-label {
position: absolute;
pointer-events: none;
left: 15px;
top: 20px;
transition: 0.2s ease all;
font-size: 20px;
}
.floating-label1 {
position: absolute;
pointer-events: none;
left: 215px;
top: 20px;
transition: 0.2s ease all;
font-size: 20px;
}
.inputText {
font-size: 14px;
width: 185px;
height: 35px;
}
input:focus ~ .floating-label,input:not(:focus):valid ~ .floating-label{
top: 15px;
bottom: 10px;
left: 15px;
font-size: 11px;
opacity: 1;
color: grey;
}
input:focus ~ .floating-label1,input:not(:focus):valid ~ .floating-label1{
top: 15px;
bottom: 10px;
left: 215px;
font-size: 11px;
opacity: 1;
color: grey;
}
.calender-css{
height:35px;
vertical-align: middle;
}
input:focus {
border-color:white;
}
</style>
<link href="http://code.jquery.com/ui/1.9.2/themes/cupertino/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script
src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"
integrity="sha256-eEa1kEtgK9ZL6h60VXwDsJ2rxYCwfxi40VZ9E0XwoEA="
crossorigin="anonymous"></script>
<div class="row">
<div class="r-left">
<!--<div>FROM</div>-->
<div><input id="datFrom" class="dp inputText" type="text" required/><span class="floating-label">From</span></div>
</div>
<div class="r-right">
<!--<div>TO</div>-->
<div><input id="datTo" class="dp inputText" type="text" required/><span class="floating-label1">TO</span></div>
</div>
<div class="farright">
<div class="inlineblock" id="90days">
90 days
</div>
<div class="inlineblock">
<img src="http://www.freeiconspng.com/uploads/calendar-icon-png-14.png" class="calender-css" />
</div>
</div>
</div>
Is there a way to control the size of the radio button in CSS ?
This css seems to do the trick:
input[type=radio] {
border: 0px;
width: 100%;
height: 2em;
}
Setting the border to 0 seems to allow the user to change the size of the button and have the browser render it in that size for eg. the above height: 2em will render the button at twice the line height. This also works for checkboxes (input[type=checkbox]). Some browsers render better than others.
From a windows box it works in IE8+, FF21+, Chrome29+.
Old question but now there is a simple solution, compatible with most browsers, which is to use CSS3. I tested in IE, Firefox and Chrome and it works.
input[type="radio"] {
-ms-transform: scale(1.5); /* IE 9 */
-webkit-transform: scale(1.5); /* Chrome, Safari, Opera */
transform: scale(1.5);
}
Change the value 1.5, in this case an increment of 50% in size, according to your needs. If the ratio is very high, it can blur the radio button. The next image shows a ratio of 1.5.
You can control radio button's size with css style:
style="height:35px; width:35px;"
This directly controls the radio button size.
<input type="radio" name="radio" value="value" style="height:35px; width:35px; vertical-align: middle;">
A solution which works quite well is described right here:
https://developer.mozilla.org/fr/docs/Web/HTML/Element/Input/radio
The idea is to use the appearance property, which when set to none allows to change the width and height of the radio button.
The radio buttons are not blurry, and you can add other effects like transitions and stuff.
Here's an example :
input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 50%;
width: 16px;
height: 16px;
border: 2px solid #999;
transition: 0.2s all linear;
margin-right: 5px;
position: relative;
top: 4px;
}
input:checked {
border: 6px solid black;
outline: unset !important /* I added this one for Edge (chromium) support */
}
The only drawback is that it is not supported yet on IE.
Here's a GIF below to give an idea of what can be achieved. The result will look nicer on an actual browser.
And the plunker : https://plnkr.co/plunk/1W3QXWPi7hdxZJuT
Not directly. In fact, form elements in general are either problematic or impossible to style using CSS alone. the best approach is to:
hide the radio button using javascript.
Use javascript to add/display HTML that can be styled how you like e.g.
Define css rules for a selected state, which is triggered by adding a class "selected" to yuor span.
Finally, write javascript to make the radio button's state react to clicks on the span, and, vice versa, to get the span to react to changes in the radio button's state (for when users use the keyboard to access the form). the second part of this can be tricky to get to work across all browsers. I use something like the following (which also uses jQuery. I avoid adding extra spans too by styling and applying the "selected" class directly to the input labels).
javascript
var labels = $("ul.radioButtons).delegate("input", "keyup", function () { //keyboard use
if (this.checked) {
select($(this).parent());
}
}).find("label").bind("click", function (event) { //mouse use
select($(this));
});
function select(el) {
labels.removeClass("selected");
el.addClass("selected");
}
html
<ul class="radioButtons">
<li>
<label for="employee1">
employee1
<input type="radio" id="employee1" name="employee" />
</label>
</li>
<li>
<label for="employee2">
employee1
<input type="radio" id="employee2" name="employee" />
</label>
</li>
</ul>
Resizing the default widget doesn’t work in all browsers, but you can make custom radio buttons with JavaScript. One of the ways is to create hidden radio buttons and then place your own images on your page. Clicking on these images changes the images (replaces the clicked image with an image with a radio button in a selected state and replaces the other images with radio buttons in an unselected state) and selects the new radio button.
Anyway, there is documentation on this subject. For example, read this: Styling Checkboxes and Radio Buttons with CSS and JavaScript.
Here's one approach. By default the radio buttons were about twice as large as labels.
(See CSS and HTML code at end of answer)
Safari: 10.0.3
Chrome: 56.0.2924.87
Firefox: 50.1.0
Internet Explorer: 9 (Fuzziness not IE's fault, hosted test on netrenderer.com)
CSS:
.sortOptions > label {
font-size: 8px;
}
.sortOptions > input[type=radio] {
width: 10px;
height: 10px;
}
HTML:
<div class="rightColumn">Answers
<span class="sortOptions">
<input type="radio" name="answerSortList" value="credate"/>
<label for="credate">Creation</label>
<input type="radio" name="answerSortList" value="lastact"/>
<label for="lastact">Activity</label>
<input type="radio" name="answerSortList" value="score"/>
<label for="score">Score</label>
<input type="radio" name="answerSortList" value="upvotes"/>
<label for="upvotes">Up votes</label>
<input type="radio" name="answerSortList" value="downvotes"/>
<label for="downvotes">Down Votes</label>
<input type="radio" name="answerSortList" value="accepted"/>
<label for="downvotes">Accepted</label>
</span>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
input[type="radio"] {
-ms-transform: scale(1.5); /* IE 9 */
-webkit-transform: scale(1.5); /* Chrome, Safari, Opera */
transform: scale(1.5);
}
</style>
</head>
<body>
<div class="container">
<h2>Form control: inline radio buttons</h2>
<p>The form below contains three inline radio buttons:</p>
<form>
<label class="radio-inline">
<input type="radio" name="optradio">Option 1
</label>
<label class="radio-inline">
<input type="radio" name="optradio">Option 2
</label>
<label class="radio-inline">
<input type="radio" name="optradio">Option 3
</label>
</form>
</div>
</body>
</html>
Well, I am from the future as compared to the posted year of this question, but I believe my answer will benefit all the new visitors:
So if you want to increase the size of the "radio" button with CSS you can simply do it by putting the following styling rules in CSS and it will help you,
input[radio] {
height: 20px;
width: 20px;
vertical-align: middle;
}
This works fine for me in all browsers:
(inline style for simplicity...)
<label style="font-size:16px;">
<input style="height:1em; width:1em;" type="radio">
<span>Button One</span>
</label>
The size of both the radio button and text will change with the label's font-size.
Directly you can not do this. [As per my knowledge].
You should use images to supplant the radio buttons. You can make them function in the same manner as the radio buttons inmost cases, and you can make them any size you want.
You can also use the transform property, with required value in scale:
input[type=radio]{transform:scale(2);}
(Vue3) HTML:
<h2>Group By</h2>
<div class="radioButtons">
<label><input type="radio" id="groupByDevice"
v-model="data.groupBy" value="device" />
<span>Device Location</span>
</label>
<label><input type="radio" id="groupByLocation"
v-model="data.groupBy" value="location" />
<span>Device Type</span></label>
</div>
</div>
SASS:
$vw-viewport: 2400px;
#function toVw($vw-viewport, $value) {
#return ($value / $vw-viewport) * 100vw;
}
label {
font-size: toVw($vw-viewport, 16px);
line-height: toVw($vw-viewport, 18px);
}
.radioButtons {
> label {
white-space: no-wrap;
display: inline-block;
height: toVw($vw-viewport, 22px);
margin: 0 toVw($vw-viewport, 10px) toVw($vw-viewport, 5px) 0;
> input[type=radio] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: inline-block;
border-radius: 50%;
width: toVw($vw-viewport, 18px);
height:toVw($vw-viewport, 18px);
border: toVw($vw-viewport,2px) solid #747474;
margin: 0;
position: relative;
top: toVw($vw-viewport, 2px);
background: white;
&::after {
content: '';
position: absolute;
top: 12.5%;
left: 12.5%;
right: 12.5%;
bottom: 12.5%;
width: auto;
height: auto;
background: rgb(80, 95, 226);
opacity: 0;
border-radius: 50%;
transition: 0.2s opacity linear;
}
&:checked {
&::after {
opacity: 1 !important;
background: rgb(80, 95, 226) !important;
}
}
}
&:hover {
cursor: pointer;
> input[type=radio]::after {
opacity: 1;
background: #cfd1e2;
}
}
> span {
display: inline-block;
position: relative;
top: toVw($vw-viewport, -1px);
padding-left: toVw($vw-viewport, 7px);
}
}
}
The result is like this. On hover, a gray dot appears as well. The labels will wrap horizontally when there is room, there was not enough room here so they stack. This scales with the page. If you don't need that, remove the SASS function and use the pixels directly. This is a case where !important is being used correctly IMHO, in this case to override hover when the radio is checked.
try this code... it may be the ans what you exactly looking for
body, html{
height: 100%;
background: #222222;
}
.container{
display: block;
position: relative;
margin: 40px auto;
height: auto;
width: 500px;
padding: 20px;
}
h2 {
color: #AAAAAA;
}
.container ul{
list-style: none;
margin: 0;
padding: 0;
overflow: auto;
}
ul li{
color: #AAAAAA;
display: block;
position: relative;
float: left;
width: 100%;
height: 100px;
border-bottom: 1px solid #333;
}
ul li input[type=radio]{
position: absolute;
visibility: hidden;
}
ul li label{
display: block;
position: relative;
font-weight: 300;
font-size: 1.35em;
padding: 25px 25px 25px 80px;
margin: 10px auto;
height: 30px;
z-index: 9;
cursor: pointer;
-webkit-transition: all 0.25s linear;
}
ul li:hover label{
color: #FFFFFF;
}
ul li .check{
display: block;
position: absolute;
border: 5px solid #AAAAAA;
border-radius: 100%;
height: 25px;
width: 25px;
top: 30px;
left: 20px;
z-index: 5;
transition: border .25s linear;
-webkit-transition: border .25s linear;
}
ul li:hover .check {
border: 5px solid #FFFFFF;
}
ul li .check::before {
display: block;
position: absolute;
content: '';
border-radius: 100%;
height: 15px;
width: 15px;
top: 5px;
left: 5px;
margin: auto;
transition: background 0.25s linear;
-webkit-transition: background 0.25s linear;
}
input[type=radio]:checked ~ .check {
border: 5px solid #0DFF92;
}
input[type=radio]:checked ~ .check::before{
background: #0DFF92;
}
<ul>
<li>
<input type="radio" id="f-option" name="selector">
<label for="f-option">Male</label>
<div class="check"></div>
</li>
<li>
<input type="radio" id="s-option" name="selector">
<label for="s-option">Female</label>
<div class="check"><div class="inside"></div></div>
</li>
<li>
<input type="radio" id="t-option" name="selector">
<label for="t-option">Transgender</label>
<div class="check"><div class="inside"></div></div>
</li>
</ul>
<html>
<head>
</head>
<body>
<style>
.redradio {border:5px black solid;border-radius:25px;width:25px;height:25px;background:red;float:left;}
.greenradio {border:5px black solid;border-radius:25px;width:29px;height:29px;background:green;float:left;}
.radiobuttons{float:left;clear:both;margin-bottom:10px;}
</style>
<script type="text/javascript">
<!--
function switchON(groupelement,groupvalue,buttonelement,buttonvalue) {
var groupelements = document.getElementById(groupelement);
var buttons = groupelements.getElementsByTagName("button");
for (i=0;i<buttons.length;i++) {
if (buttons[i].id.indexOf("_on") != -1) {
buttons[i].style.display="none";
} else {
buttons[i].style.display="block";
}
}
var buttonON = buttonelement + "_button_on";
var buttonOFF = buttonelement + "_button_off";
document.getElementById(buttonON).style.display="block";
document.getElementById(buttonOFF).style.display="none";
document.getElementById(groupvalue).value=buttonvalue;
}
// -->
</script>
<form>
<h1>farbige Radiobutton</h1>
<div id="button_group">
<input type="hidden" name="button_value" id="button_value" value=""/>
<span class="radiobuttons">
<button type="button" value="OFF1" name="button1_button_off" id="button1_button_off" onclick="switchON('button_group','button_value','button1',this.value)" class="redradio"></button>
<button type="button" value="ON1" name="button1_button_on" id="button1_button_on" style="display:none;" class="greenradio"></button>
<label for="button1_button_on"> Ich will eins</label>
</span><br/>
<span class="radiobuttons">
<button type="button" value="OFF2" name="button2_button_off" id="button2_button_off" onclick="switchON('button_group','button_value','button2',this.value)" class="redradio"></button>
<button type="button" value="ON2" name="button2_button_on" id="button2_button_on" style="display:none;" class="greenradio"></button>
<label for="button2_button_on"> Ich will zwei</label>
</span><br/>
<span class="radiobuttons">
<button type="button" value="OFF3" name="button3_button_off" id="button3_button_off" onclick="switchON('button_group','button_value','button3',this.value)" class="redradio"></button>
<button type="button" value="ON3" name="button3_button_on" id="button3_button_on" style="display:none;" class="greenradio"></button>
<label for="button3_button_on"> Ich will drei</label>
</span><br/>
<span class="radiobuttons">
<button type="button" value="OFF4" name="button4_button_off" id="button4_button_off" onclick="switchON('button_group','button_value','button4',this.value)" class="redradio"></button>
<button type="button" value="ON4" name="button4_button_on" id="button4_button_on" style="display:none;" class="greenradio"></button>
<label for="button4_button_on"> Ich will vier</label>
</span>
</div>
</form>
</body>
</html>