Using Vanilla JavaScript (not using any framework), how can I add keyboard navigation to a simple dropdown? By simple dropdown I mean a very basic dropdown such as:
<div class="dropdown">
<div>Test Dropdown</div>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>
Alongside with JavaScript, is there any HTML5 solution for this problem (such that the web browser would understand automatically without having to add any ad-hoc logic)?
Just .focus() on it then you can use your keyboard arrows.
document.getElementById("dropdown").focus();
<label for="dropdown">Choose an option:</label>
<select class="dropdown" name="dropdown" id="dropdown">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
Radios will give you all the native functionality, you can hide the bubbles with appearance: none and put a label immediately after the input for styling.
input[type=radio] {
display: block;
appearance: none;
margin: 0;
outline: 0;
}
input[type=radio]+label {
display: block;
width: 100%;
background-color: green;
}
input[type=radio]:checked+label {
background-color: yellow;
}
<input type="radio" name="radio-group" id="A"/>
<label for="A">A</label>
<input type="radio" name="radio-group" id="B"/>
<label for="B">B</label>
<input type="radio" name="radio-group" id="C"/>
<label for="C">C</label>
appearance support: https://caniuse.com/?search=appearance
Note that the for property of the label being the same as the id of the input is what allows you to click the label to select the hidden radio.
You can put any html elements in the label tag to fully customize
input[type='radio'] {
display: block;
appearance: none;
margin: 0;
outline: 0;
}
input[type='radio'] + label {
display: block;
width: 100%;
background-color: lightblue;
margin-top: 4px;
overflow: auto;
}
input[type='radio']:checked + label {
background-color: yellow;
}
.a {
width: min-content;
color: red;
border: 2px solid red;
padding: 10px;
margin: 10px;
}
.b {
width: min-content;
color: blue;
border: 2px solid blue;
padding: 20px;
margin: 20px;
margin-left: auto;
}
.c {
width: min-content;
color: green;
border: 2px solid green;
padding: 40px;
margin: 40px;
margin-left: auto;
margin-right: auto;
}
<input type="radio" name="radio-group" id="A"/>
<label for="A"><div class="a">A</div></label>
<input type="radio" name="radio-group" id="B"/>
<label for="B"><div class="b">B</div></label>
<input type="radio" name="radio-group" id="C"/>
<label for="C"><div class="c">C</div></label>
Related
Selecting radio input inside one item in ngFor triggers other radio inputs checked . Created a demo .
Html
<div class='section' *ngFor="let item of radioData">
<div class="radio-selection">
<input type="radio" attr.name="radio-{{item.Id}}" value="true" attr.id="radio-first-{{item.Id}}" [(ngModel)]='item.IsSelected'>
<label attr.for="radio-first-{{item.Id}}">Radio-first {{item.Id}}--value={{item.IsSelected}}</label>
</div>
<div class="radio-selection">
<input type="radio" attr.name="radio-{{item.Id}}" value="false" attr.id="radio-second-{{item.Id}}" [(ngModel)]='item.IsSelected'>
<label attr.for="radio-second-{{item.Id}}">Radio-second {{item.Id}}--value={{item.IsSelected}}</label>
</div>
</div>
css
.section {
border:1px solid #000;
margin-bottom:1rem;
}
.radio-selection {
input[type="radio"] {
display: none;
}
input[type="radio"] + label {
position: relative;
display: inline-block;
vertical-align: middle;
margin: 5px;
cursor: pointer;
&:hover {
&:before {
border-color: green;
}
}
}
input[type="radio"] + label:before {
content: "";
background: #fff;
border: 1px solid #333;
display: inline-block;
vertical-align: middle;
width: 15px;
height: 15px;
margin-right: 10px;
text-align: center;
padding: 2px;
border-radius:50%;
}
input[type="radio"]:checked + label:before {
background:red;
box-shadow: inset 0px 0px 0px 2.5px #fff;
}
}
Thanks
Use name instead of attr.name to set the name of the input elements (see this stackblitz):
<input type="radio" name="radio-{{item.Id}}" ...>
or use the property binding syntax (see this stackblitz):
<input type="radio" [name]="'radio-'+item.Id" ...>
I have a form with cheque and cash radio button and cheque radio is default checked. I also set, If the cheque is checked than displaying the input field. If cash is checked then hide the input field.
I check in the inspect elements, Event is working when selecting the cash but input fields are not hiding when cash is selected.
My issue got resolved using Nisarg Shah answer. Now I tried to submit the form but I am getting the value of cheque radio button but I am not getting the value of cash. Getting errorUndefined index: mode_of_payment
if (isset($_POST['submit'])) {
$status=$_POST['mode_of_payment'];
echo $status;
}
would you help me out in this?
$('label.mode_of_payment').click(function(){
$('input[type=radio]').attr('checked',null);
$('label.mode_of_payment').removeClass("checked");
$(this).prev().attr('checked',"checked");
$(this).addClass("checked");
})
$('#subject_section').change(function() {
if ($('#display_cheque').attr('checked')) {
$('#display_cheque_field').hide();
} else {
$('#display_cheque_field').show();
}
});
.radio-border{
border:1px solid #000;
width: 150px;
border-radius: 30px;
text-align: center;
display: flex;
}
.radio-width-half{
width: 75px;
}
input[type=radio]
{
display: none;
}
input[type=radio]:checked + label {
background-color: #00a2ff;
border-radius: 30px;
display: block;
color: #fff;
}
.checked{
background-color: #00a2ff;
border-radius: 30px;
display: block;
color: #fff;
}
label.mode_of_payment {
display: block;
padding: 8px;
transition: all 300ms ;
}
#display_cheque_field
{
margin-top: 10px;
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<form action="#" method="post" name="subject_section">
<div class="radio-border">
<div class="radio-width-half">
<input type="radio" name="mode_of_payment" value="1" class="display-none" id="display_cheque" checked>
<label class="mode_of_payment">Cheque</label>
</div>
<div class="radio-width-half">
<input type="radio" name="mode_of_payment" value="0" class="display-none">
<label class="mode_of_payment">Cash</label>
</div>
</div><!--radio border-->
<div id="display_cheque_field">
<input type="text" name="cheque_number" class="form-control" id="cheque_number" placeholder="Cheque number">
<input type="text" name="drawee_bank" class="form-control" id="drawee_bank" placeholder="Bank">
</div>
<input type="submit" name="submit" value="submit">
</form>
You can't bind to the change event on the entire form, and you don't need to. Since you have already defined a click event to handle checking-unchecking of the radio buttons, you can hide/show the inputs along with them. Your modified event handler could be like this:
$('label.mode_of_payment').click(function() {
$('input[type=radio]').prop('checked', false);
$('label.mode_of_payment').removeClass("checked");
$(this).prev().prop('checked', true);
$(this).addClass("checked");
if (!$('#display_cheque').prop('checked')) {
$('#display_cheque_field').hide();
} else {
$('#display_cheque_field').show();
}
})
$('label.mode_of_payment').click(function() {
$('input[type=radio]').prop('checked', false);
$('label.mode_of_payment').removeClass("checked");
$(this).prev().prop('checked', true);
$(this).addClass("checked");
if (!$('#display_cheque').prop('checked')) {
$('#display_cheque_field').hide();
} else {
$('#display_cheque_field').show();
}
})
.radio-border {
border: 1px solid #000;
width: 150px;
border-radius: 30px;
text-align: center;
display: flex;
}
.radio-width-half {
width: 75px;
}
input[type=radio] {
display: none;
}
input[type=radio]:checked+label {
background-color: #00a2ff;
border-radius: 30px;
display: block;
color: #fff;
}
.checked {
background-color: #00a2ff;
border-radius: 30px;
display: block;
color: #fff;
}
label.mode_of_payment {
display: block;
padding: 8px;
transition: all 300ms;
}
#display_cheque_field {
margin-top: 10px;
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<form action="#" method="post" name="subject_section">
<div class="radio-border">
<div class="radio-width-half">
<input type="radio" name="mode_of_payment" value="1" class="display-none" id="display_cheque" checked>
<label class="mode_of_payment">Cheque</label>
</div>
<div class="radio-width-half">
<input type="radio" name="mode_of_payment" value="0" class="display-none">
<label class="mode_of_payment">Cash</label>
</div>
</div>
<!--radio border-->
<div id="display_cheque_field">
<input type="text" name="cheque_number" class="form-control" id="cheque_number" placeholder="Cheque number">
<input type="text" name="drawee_bank" class="form-control" id="drawee_bank" placeholder="Bank">
</div>
<input type="submit" name="submit" value="submit">
</form>
You can use below code. Here I have added click event on div of radio button and handled radio button change functionality there itself
$(document).on('click', '.radio-width-half',function() {
debugger;
$("input[name=mode_of_payment]",this).prop("checked",true);
//console.log("radio name = "+$("input[name=mode_of_payment]",this).attr('id'));
if($('#display_cheque').is(":checked"))
{
$('#display_cheque_field').show();
}
else{
$('#display_cheque_field').hide();
}
});
.radio-border{
border:1px solid #000;
width: 150px;
border-radius: 30px;
text-align: center;
display: flex;
}
.radio-width-half{
width: 75px;
}
input[type=radio]
{
display: none;
}
input[type=radio]:checked + label {
background-color: #00a2ff;
border-radius: 30px;
display: block;
color: #fff;
}
.checked{
background-color: #00a2ff;
border-radius: 30px;
display: block;
color: #fff;
}
label.mode_of_payment {
display: block;
padding: 8px;
transition: all 300ms ;
}
#display_cheque_field
{
margin-top: 10px;
}
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js">
</script>
<form action="#" method="post" name="subject_section">
<div class="radio-border">
<div class="radio-width-half">
<input type="radio" name="mode_of_payment" value="1" class="display-none" id="display_cheque" checked>
<label class="mode_of_payment">Cheque</label>
</div>
<div class="radio-width-half">
<input type="radio" name="mode_of_payment" value="0" class="display-none" id="display_cash">
<label class="mode_of_payment">Cash</label>
</div>
</div><!--radio border-->
<div id="display_cheque_field">
<input type="text" name="cheque_number" class="form-control" id="cheque_number" placeholder="Cheque number">
<input type="text" name="drawee_bank" class="form-control" id="drawee_bank" placeholder="Bank">
</div>
<input type="submit" name="submit" value="submit">
</form>
Try this. I have added this css for custom radio not require to use jQuery for this and also added jQuery for show and hide display_cheque_field.
.radio-width-half{
position: relative;
}
input[type="radio"] {
height: 100%;
left: 0;
opacity: 0;
position: absolute;
width: 100%;
}
$("input[type=radio]").click(function () {
if($('#display_cheque')[0].checked) {
$("#display_cheque_field").css('display' ,'block');
}
else{
$("#display_cheque_field").css('display' ,'none');
}
});
.radio-border{
border:1px solid #000;
width: 150px;
border-radius: 30px;
text-align: center;
display: flex;
}
.radio-width-half{
width: 75px;
position: relative;
}
input[type="radio"] {
height: 100%;
left: 0;
opacity: 0;
position: absolute;
width: 100%;
}
input[type=radio]:checked + label {
background-color: #00a2ff;
border-radius: 30px;
display: block;
color: #fff;
}
.checked{
background-color: #00a2ff;
border-radius: 30px;
display: block;
color: #fff;
}
label.mode_of_payment {
display: block;
padding: 8px;
transition: all 300ms ;
}
#display_cheque_field
{
margin-top: 10px;
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<form action="#" method="post" name="subject_section">
<div class="radio-border">
<div class="radio-width-half">
<input type="radio" name="mode_of_payment" value="1" class="display-none" id="display_cheque" checked>
<label class="mode_of_payment">Cheque</label>
</div>
<div class="radio-width-half">
<input type="radio" name="mode_of_payment" value="0" class="display-none">
<label class="mode_of_payment">Cash</label>
</div>
</div>
<!--radio border-->
<div id="display_cheque_field">
<input type="text" name="cheque_number" class="form-control" id="cheque_number" placeholder="Cheque number">
<input type="text" name="drawee_bank" class="form-control" id="drawee_bank" placeholder="Bank">
</div>
<input type="submit" name="submit" value="submit">
</form>
I've been stuck on this for a while. To explain very quickly, i have a table of different checkboxes. The user checks however many boxes and clicks continue. The same table shows up on another page/ The boxes that were checked are suppose to load by the click of a button.
My question is, how can I change the color of my styled checkboxes to another color by the click of a button.
Update, I've added code, sorry for the confusion, first time using this
table.example1, table.example1 th, table.example1 td {
border: 3px solid grey;
max-width: 200px;
}
input[type=checkbox] {
display:none;
}
input[type=checkbox] + label {
display:inline-block;
padding: 6px 60px;
margin-bottom: 0;
font-size: 14px;
line-height: 20px;
color: white;
text-align: center;
vertical-align: middle;
cursor: pointer;
background-color: transparent;
background-repeat: repeat-x;
}
input[type=checkbox]:checked + label{
background-color: #3e618b;
outline: 0;
}
<table class="example1" id="example" style="width:40%;" align='center'>
<tr>
<td>
<input type="checkbox" id="chk1" name="chk" value="1">
<label for="chk1"> 1</label>
</td>
<td>
<input type="checkbox" id="chk2" name="chk"value="2">
<label for="chk2"> 2</label>
</td>
</tr>
</table>
<button>Changes checked checkbox color</button>
Well you could add a class to the label and then define the color based on that class like so:
function toggle() {
var labels = document.getElementsByTagName('label');
for(var i = 0; i < labels.length; i++) {
labels[i].classList.toggle('color');
}
}
table.example1,
table.example1 th,
table.example1 td {
border: 3px solid grey;
max-width: 200px;
}
input[type=checkbox] {
display: none;
}
input[type=checkbox]+label {
display: inline-block;
padding: 6px 60px;
margin-bottom: 0;
font-size: 14px;
line-height: 20px;
color: white;
text-align: center;
vertical-align: middle;
cursor: pointer;
background-color: transparent;
background-repeat: repeat-x;
}
input[type=checkbox]:checked+label {
background-color: #3e618b;
outline: 0;
}
input[type=checkbox]:checked+label.color {
background-color: red;
outline: 0;
}
<table class="example1" id="example" style="width:40%;" align='center'>
<tr>
<td>
<input type="checkbox" id="chk1" name="chk" value="1">
<label for="chk1"> 1</label>
</td>
<td>
<input type="checkbox" id="chk2" name="chk" value="2">
<label for="chk2"> 2</label>
</td>
</tr>
</table>
<button onclick="toggle()">Changes radio button onclick</button>
You could change class attribute of a parent by click on the button.
$("button").click(function() {
$("table").toggleClass("alternative");
});
table.example1, table.example1 th, table.example1 td {
border: 3px solid grey;
max-width: 200px;
}
input[type=checkbox] {
display:none;
}
input[type=checkbox] + label {
display:inline-block;
padding: 6px 60px;
margin-bottom: 0;
font-size: 14px;
line-height: 20px;
color: white;
text-align: center;
vertical-align: middle;
cursor: pointer;
background-color: transparent;
background-repeat: repeat-x;
}
input[type=checkbox]:checked + label{
background-color: #3e618b;
outline: 0;
}
.alternative input[type=checkbox]:checked + label{
background-color: #f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="example1" id="example" style="width:40%;" align='center'>
<tr>
<td>
<input type="checkbox" id="chk1" name="chk" value="1">
<label for="chk1"> 1</label>
</td>
<td>
<input type="checkbox" id="chk2" name="chk"value="2">
<label for="chk2"> 2</label>
</td>
</tr>
</table>
<button>Changes checked checkbox color</button>
You can do it with just CSS
HIDE THE ORIGINAL INPUT FIELD
input[type=checkbox]{
visibility: hidden;
position: absolute;
}
Then add your own custom css to display the fields
input[type=checkbox] + label:before{
height:18px;
margin-right: 5px;
content: " ";
display:inline-block;
vertical-align: baseline;
border:1px solid #ccc;
border-radius:4px;
width:18px;
}
Then add your css for your desired style and background when the checkbox is selected
input[type=checkbox]:checked + label:before{
background: gold;
}
I am sure this question was asked before but I am looking for a very specific way to style a radio button.
Here is the fiddle of what I currently have
<label for="pretty">
<input type="radio" value="pretty" name="quality" id="pretty"> <span>pretty</span>
</label>
<label for="accessible-and-pretty">
<input type="radio" value="pretty" name="quality" id="accessible-and-pretty" checked> <span>accessible and pretty</span>
</label>
The question that I have is how can I achieve the attached image look and feel?
I am having trouble figuring our how to make the green area smaller or if there is something else I need to do to achieve that
Feel free to change the colors, gradients and sizes to match your requirement.
.container {
width: 100px;
margin: 0 auto;
}
.radio-grp {
margin-bottom: 10px;
}
input[type="radio"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height: 0;
width: 0;
}
input[type="radio"] + label {
display: inline-block;
position: relative;
height: 30px;
width: 30px;
border-radius: 100%;
background-color: #fff;
border: 1px solid #ddd;
}
input[type="radio"] + label,
.radio-txt {
cursor: pointer;
}
label.radio-txt {
display: inline-block;
float: right;
padding-top: 5px;
}
input[type="radio"] + label:before {
content: '';
position: absolute;
height: 22px;
width: 22px;
border-radius: 100%;
top: 4px;
left: 4px;
box-shadow: 4px 5px 10px 0px #ccc inset;
}
input[type="radio"] + label:after {
content: '';
position: absolute;
height: 10px;
width: 10px;
border-radius: 100%;
top: 10px;
left: 10px;
transition: background 0.1s linear;
}
input[type="radio"]:checked + label:after {
background-color: #888888;
}
<div class="container">
<div class="radio-grp">
<input type="radio" name="demo" value="1" id="radio1" checked>
<label for="radio1"></label>
<label for="radio1" class="radio-txt">Demo 1</label>
</div>
<div class="radio-grp">
<input type="radio" name="demo" id="radio2" value="2">
<label for="radio2"></label>
<label for="radio2" class="radio-txt">Demo 2</label>
</div>
<div class="radio-grp">
<input type="radio" name="demo" id="radio3" value="3">
<label for="radio3"></label>
<label for="radio3" class="radio-txt">Demo 3</label>
</div>
</div>
Is it possible to fill the checkbox with a background colour when checked? Also to disable the 'tick' itself.
How do I achieve this? Should I be looking at jQuery/Javascript for this?
Fiddle Demo: http://jsfiddle.net/119a7e8r/
li.squaredTwo li label {
display:none
}
input[type=checkbox]:checked {
background:red
}
<ul>
<li id='field_1_20' class='gfield squaredTwo field_sublabel_below field_description_below' >
<label class='gfield_label' >Is it free</label>
<div class='ginput_container ginput_container_checkbox'>
<ul class='gfield_checkbox' id='input_1_20'>
<li class='gchoice_1_20_1'>
<input name='input_20.1' type='checkbox' value='Yes' id='choice_1_20_1' tabindex='35' />
<label for='choice_1_20_1' id='label_1_20_1'>Yes</label>
</li>
</ul>
</div>
</li>
</ul>
Here's a nifty CSS-only solution for custom checkboxes:
.hideme {
display: none;
}
.woo {
cursor: pointer;
}
.hideme + .woo:before {
width: 10px;
height: 10px;
border: 2px solid gray;
border-radius: 2px;
box-shadow: -1px 1px 2px 2px rgba(0,0,0,0.2);
background: red;
position: relative;
display: inline-block;
margin-right: 1ex;
content: "";
}
.hideme:checked + .woo:before {
background: green;
}
<input type="checkbox" class="hideme" id="myinput" /><label class="woo" for="myinput">Click me</label>
My starting point for just pure CSS on this would be something like this:
HTML
<input type="checkbox">Hello</input>
CSS
input[type=checkbox] {
width: 20px;
height: 20px;
margin-right: 5px;
vertical-align: bottom;
}
input[type=checkbox]:after {
content: "";
border-bottom: 10px solid red;
border-top: 10px solid red;
display: block;
opacity: 1;
}
input[type=checkbox]:checked:after {
border-bottom: 10px solid blue;
border-top: 10px solid blue;
}
Demo: http://codepen.io/newanalog/pen/LppBgv
Try playing around with the opacity and sizes.
I think you should be looking at jQuery for this. here are some examples for other stackoverflow questions, with a working jsfiddle
hope this helps!