I'm working on a One Pager website where I have a navigation menu. I'd want to have radio input associated to the clicked a, in order to apply some CSS to the active radio.
As you will see, the CSS is applied when I click on the radio, but not when I click on the link. I know I could do this using JavaScript, but I am trying to avoid growing my code base.
The second section of the snippet is what I'd want to achieve, but with an a tag in the label. The radio will be hidden, so clicking on the radio isn't an acceptable answer. How can I make the a tag and the input tag activate?
input[type=radio]:checked + label {
color:red;
background-color:green;
}
.working {
visibility: hidden;
width:0;
}
<html>
<body>
<div>
<h2>Not working with a tag</h2>
<div>
<input id="a" type="radio" name="menu1" value="a"/>
<label for="a">Input 1</label>
</div>
<div>
<input id="b" type="radio" name="menu1" value="b"/>
<label for="b">Input 2</label>
</div>
</div>
<div>
<h2>Expected result (without a, it doesn't work)</h2>
<div>
<input class="working" id="c" type="radio" name="menu2" value="a"/>
<label for="c">Input 1</label>
</div>
<div>
<input class="working" id="d" type="radio" name="menu2" value="b"/>
<label for="d">Input 2</label>
</div>
</div>
</body>
</html>
Right solution is here , try this.
<script type="text/javascript">
$(document).ready(function(){
$('[name=title_format]').click(function() {
$('[name=doc-title]').val('Title changed to '+$(this).val());
});
});
</script>
<style>
input[type=radio]:checked + label {
color:red;
background-color:green;
}
.working {
width:0;
}
</style>
<div>
<h2>Not working with a tag</h2>
<div>
<a href="#">
<input type="radio" name="title_format" class="title-format" id="title-format-0" value="0" checked="checked"> <label for="title-format-0">Input 1</label>
</a>
</div>
<div>
<a href="#">
<input type="radio" name="title_format" class="title-format" id="title-format-1" value="1">
<label for="title-format-1">Input 2</label>
</a>
</div>
</div>
<div>
<h2>Expected result (without a, it doesn't work)</h2>
<div>
<input class="working" id="c" type="radio" name="menu2" value="a"/>
<label for="c">Input 1</label>
</div>
<div>
<input class="working" id="d" type="radio" name="menu2" value="b"/>
<label for="d">Input 2</label>
</div>
</div>
Here's a working example of the label syntax: https://jsfiddle.net/93c3sscs/
If you're testing on IE11 or your customers use IE (not sure about Edge and other IE versions), you can't rely on labels to activate inputs. IE does not apply clickable functionality to <label><input></label>, and Microsoft put out 2 updates in the second half of 2015 that completely broke my app because of this by positioning the clickable area 5px above my widget sprites.
Related
I tried this solution but it didn't work, any advice how it can be achieved?
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-row">
<div class="col-4">
<p>Signing on behalf of</p>
<label class="radio-inline" style="">
<input type="radio" name="optradio" checked="true" style="padding-left:15px;">A Company
</label>
<label class="radio-inline" style="padding-left:15px;">
<input type="radio" name="optradio" style="padding-left:15px;">An Individual
</label>
</div>
</div>
JSfiddle
input tag don't have closing tag, second wrap label inside span
and give it a margin
label span{
display:inline-block;
margin-left: 10px;
}
<div class="form-row">
<div class="col-4">
<p>Signing on behalf of</p>
<label class="radio-inline" style="">
<input type="radio" name="optradio" checked="true" style="padding-left:15px;"><span>A Company</span>
</label>
<label class="radio-inline" style="padding-left:15px;">
<input type="radio" name="optradio" style="padding-left:15px;"><span>An Individual</span>
</label>
</div>
</div>
Edit: You can just separate the input and label and link them using an 'id' on the input and a 'for' attribute on the label. Then you can style your label to add the spacing.
<input id="company" type="radio" name="optradio" checked="true" /><span ></span><label for="company" class="radio-inline" style="padding-left:15px;"> A Company
</label>
Insted padding-left use margin-right. And don't use closing </input> tag, it is auto closing like <input />
.radio-class {
margin-right: 15px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-row">
<div class="col-4">
<p>Signing on behalf of</p>
<label class="radio-inline" style="">
<input type="radio" name="optradio" checked="true" class="radio-class" />A Company
</label>
<label class="radio-inline" style="padding-left:15px;">
<input type="radio" name="optradio" class="radio-class" />An Individual
</label>
</div>
</div>
Taking off from Mr Belugin's idea above. This bit of css will add a right margin to all radio buttons. This solution required no additional class added to the many radio buttons in my form.
It basically adds a 4px right margin to all radio buttons.
input[type=radio] { margin-right:4px; }
This code is expected to show 2 radio buttons group where they "the group" is shown horizontally as well as "the button to the left of the caption" but I am getting the first effect but now how can I get it so that the button icon is located to the left of their corresponding caption? Thanks
edit
I am not using bootstrap up the html chain.
.list-item {
margin: 1em 1em;
}
<div class="list-item">
{{> sub}}
</div>
<template name="sub">
<label>
<input type="radio" name="mygroup" />
My caption 1
</label>
<label>
<input type="radio" name="mygroup" />
My caption 2
</label>
</template>
Like this maybe?
.list-item {
margin: 1em 1em;
}
Vertical <br>
<div class="list-item">
<label>
<input type="radio" name="mygroup" /> My caption 1
</label>
</div>
<div class="list-item">
<label>
<input type="radio" name="mygroup" /> My caption 2
</label>
</div>
Horizontal <br>
<div class="list-item">
<label>
<input type="radio" name="mygroup" /> My caption 1
</label>
<label>
<input type="radio" name="mygroup" /> My caption 2
</label>
</div>
You can set the input to position:absolute; and set a padding-left on the label, it works wonders :)
Edit: you might have to set position relative on the labels.
I have two radio buttons, No and Yes. By default no is checked. I have css that styles the checked elements. But by default the styles only work if you physically check it. I want to style it right of page load without have to select it. Currently I am stumped. Thanks for your help
HTML
<div class="split">
<input id="contact-no" type="radio" name="contact" value="No" checked="checked">
<label for="contact-no">No</label>
</div>
<div class="split">
<input id="contact-yes" type="radio" name="contact" value="Yes">
<label for="contact-yes">Yes</label>
</div>
CSS
.am-form input[type="radio"] + label:hover, .am-form input[type="radio"]:checked + label{background: rgb(239,58,65);}
What it looks like on page load:
What It should Look like on page load and after you select it:
I had multiple hidden section with the same name/id, so I juts had to customize each one.
<div class="split">
<input id="ns-contact-no" type="radio" name="ns_contact" value="No" checked="checked">
<label for="ns-contact-no">No</label>
</div>
<div class="split">
<input id="fs-contact-yes" type="radio" name="ns_contact" value="Yes">
<label for="fs-contact-yes">Yes</label>
</div>
further down and hidden:
<div class="split">
<input id="bs-contact-no" type="radio" name="bs_contact" value="No" checked="checked">
<label for="bs-contact-no">No</label>
</div>
<div class="split">
<input id="bs-contact-yes" type="radio" name="bs_contact" value="Yes">
<label for="bs-contact-yes">Yes</label>
</div>
Trying to get radio buttons, questions and answered centered in the middle of the page any help wud be great here is my code!!
<form action='process.php?id=1' method='post' id='quizForm' id='1' onSubmit='validateForm()' name='myForm'>
<ol>
<li>
<h3>1 x 1 =</h3>
<div>
<input type='radio' name='answerOne' id='answerOne' value='A' />
<label for='answerOneA'>A)1</label>
</div>
<div>
<input type='radio' name='answerOne' id='answerOne' value='B' />
<label for='answerOneB'>B)2</label>
</div>
<div>
<input type='radio' name='answerOne' id='answerOne' value='C' />
<label for='answerOneC'>C)3</label>
</div>
</li>
<li>
<h3>1 x 6 =</h3>
<div>
<input type='radio' name='answerTwo' id='answerTwo' value='A' />
<label for='answerTwoA'>A)5</label>
</div>
<div>
<input type='radio' name='answerTwo' id='answerTwo' value='B' />
<label for='answerTwoB'>B)6</label>
</div>
<div>
<input type='radio' name='answerTwo' id='answerTwo' value='C' />
<label for='answerTwoC'>C)4</label>
</div>
</li>
<li>
<h3>2 x 8 =</h3>
<div>
<input type='radio' name='answerThree' id='answerThree' value='A' />
<label for='answerThreeA'>A)14</label>
</div>
<div>
<input type='radio' name='answerThree' id='answerThree' value='B' />
<label for='answerThreeB'>B)12</label>
</div>
<div>
<input type='radio' name='answerThree' id='answerThree' value='C' />
<label for='answerThreeC'>C)16</label>
</div>
</li>
</ol>
<input type="submit" />
</form>
I have created basic fiddle for you with an example solution, check if that is what you need.
http://jsfiddle.net/bhd2C/
I have simply put your form into a div for which I have created simple css class:
.content {
width:100%
margin:0 auto;
text-align:center;
}
<form style='text-align:center' action='process.php?id=1' method='post' id='quizForm' id='1' onSubmit='validateForm()' name='myForm'>
<ol style='list-style-position:inside;'>
Changing first two lines would work. Setting text-align property to 'center' makes what is inside centered in the container. "list-style-position:inside;" code makes list styles( 1., 2. etc.) appear in normal flow so that they are also centered.
Note: text-align centers your content in the middle of container. That's, your container should be 100% width if you want to locate your content in the middle of the page.
Also note that when using css, internal or external style would be better instead of inline style( used in the code above) if you use it in other forms and lists.
Result
Ways to insert css
How to create centered ordered list with HTML/CSS?
I'm using a radio button to create tabs from CSS only. The problem I'm running into is that I can't figure out how to select the <label> that references the radio button. I keep the labels separate from the content so that I can lay them out as tabs:
<div class="tab-labels">
<label for="tab-1">Tab 1</label>
<label for="tab-2">Tab 2</label>
<label for="tab-3">Tab 3</label>
</div>
The content panes are layed out below. The input button is kept inside the content div so that I can select it when the label is clicked. But, I can't go in reverse:
<div class="content-container">
<div class="tab details">
<input id="tab-1" type="radio" name="radio-set" class="tab-selector" checked="checked"/>
<div class="content">
<p>Some content 1</p>
</div>
</div>
<div class="tab details">
<input id="tab-2" type="radio" name="radio-set" class="tab-selector"/>
<div class="content">
<p>Some content 2</p>
</div>
</div>
<div class="tab details">
<input id="tab-3" type="radio" name="radio-set" class="tab-selector"/>
<div class="content">
<p>Some content 3</p>
</div>
</div>
</div>
What I'm trying to accomplish and my question for this issue would be: How can I change the label background color when the radio input is clicked given this layout?
I have provided a fiddle if you want to play with this live:
http://jsfiddle.net/mjohnsonco/6KeTR/
You can achieve this by CSS only, but only with restructured HTML and more ugly CSS.
Look at this example: http://jsfiddle.net/kizu/6KeTR/16/
Here you should move all the inputs out of their containers to the place where they would immediately precede the blocks you want them to affect. In that case, you place it so you could then target the parents of the tabs and their content using ~ combinator, and some nth-child selectors like this:
#tab-1:checked ~ .content-container > .tab:first-child > .content,
#tab-2:checked ~ .content-container > .tab:nth-child(2) > .content,
#tab-3:checked ~ .content-container > .tab:nth-child(3) > .content {}
However, such CSS-only thingies are more like proof-of-concept — they are not that maintainable and usable as their JS counterparts. So I'd recommend using them only for fun :)
CSS
.bgcolor1{
background-color:#blue;
}
.bgcolor2{
background-color:green;
}
.bgcolor3{
background-color:red;
}
JQUERY
$('input[name=radio-set1]:checked', '#main').addClass(bgcolor1)
$('input[name=radio-set2]:checked', '#main').addClass(bgcolor2)
$('input[name=radio-set5]:checked', '#main').addClass(bgcolor3)
HTML
<input id="tab-1" type="radio" name="radio-set1" class="tab-selector" checked="checked"/>
<input id="tab-2" type="radio" name="radio-set2" class="tab-selector" checked="checked"/>
<input id="tab-3" type="radio" name="radio-set3" class="tab-selector" checked="checked"/>
<label class="bgcolor1" for="tab-1">Tab 1</label>
<label class="bgcolor2" for="tab-2">Tab 2</label>
<label class="bgcolor3" for="tab-3">Tab 3</label>