I want to access span elements inside .payment-method. For first span element I want to set image "image1.png" and for second element "image2.png".
Here is my HTML code:
.payment-group .payment-method:nth-child(0){
.payment-method-title label span:before{
content: url(https://icon-library.com/images/delivery-service-icon/delivery-service-icon-6.jpg);
}
}
.payment-group.payment-method:nth-child(1){
.payment-method-title label span:before{
content: url(https://icon-library.com/images/bank-transfer-icon/bank-transfer-icon-6.jpg);
}
}
<div class="payment-group">
<div class="payment-method">
<div class="payment-method-title field choice">
<input type="radio" class="radio" id="cashondelivery" value="cashondelivery"/>
<label class="label">
<span>Cash on delivery</span>
</label>
</div>
</div>
<div class="payment-method">
<div class="payment-method-title field choice">
<input type="radio" class="radio" id="banktransfer" value="banktransfer"/>
<label class="label">
<span>Bank transfer</span>
</label>
</div>
</div>
</div>
Can someone help me ?
(I am using LESS, but you can help me with plain CSS)
There are a few problems here:
nth-child starts at 1 not 0 in CSS.
The nesting of selectors does not exist in pure CSS, this snippet 'flattens' them
Space is a very important character in a CSS selector. It is a 'combinator'. The second selector missed it out before .payment-method
the before of a pseudo element nowadays should have a double colon as in ::before (this indicates a pseudo element as opposed to a pseudo class).
.payment-group .payment-method:nth-child(1) .payment-method-title label span::before {
content: url(https://icon-library.com/images/delivery-service-icon/delivery-service-icon-6.jpg);
}
.payment-group .payment-method:nth-child(2) .payment-method-title label span::before {
content: url(https://icon-library.com/images/bank-transfer-icon/bank-transfer-icon-6.jpg);
}
<div class="payment-group">
<div class="payment-method">
<div class="payment-method-title field choice">
<input type="radio" class="radio" id="cashondelivery" value="cashondelivery" />
<label class="label">
<span>Cash on delivery</span>
</label>
</div>
</div>
<div class="payment-method">
<div class="payment-method-title field choice">
<input type="radio" class="radio" id="banktransfer" value="banktransfer" />
<label class="label">
<span>Bank transfer</span>
</label>
</div>
</div>
</div>
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; }
I have a HTML page containing some radiobuttons and some related fieldsets, each one with its own id.
I want to hide/view the div depending on a specific radiobutton.
The attached Fiddle do the job.
Here is the HTML
<div id="FS1">External fieldset with radiobuttons
<div class="row">
<input checked="checked" id="R1" name="Group1" type="radio" value="1"/>
<label for="R1">Element 1</label>
<input id="R2" name="Group1" type="radio" value="2"/>
<label for="R2">Element 2</label>
<input id="R3" name="Group1" type="radio" value="3"/>
<label for="R3">Element 3</label>
<fieldset class="fs" id="FS1-1">
<legend>Header element 1</legend>
<div class="form-group">
<input class="form-control" id="exampleInputText1" type="text"/>
<label for="exampleInputText1">Input field in the first element</label></div>
</fieldset>
<fieldset class="fs" id="FS1-2">
<legend>Header element 2</legend>
<div class="form-group">
<input class="form-control" id="exampleInputText2" type="text"/>
<label for="exampleInputText2">This is the input field for the second</label>
</div>
</fieldset>
<fieldset class="fs" id="FS1-3">
<legend>Header element 3</legend>
<div class="form-group">
<input class="form-control" id="exampleInputText3" type="text"/>
<label for="exampleInputText3">And this is the last input field</label>
</div>
</fieldset>
</div>
</div>
and this is the CSS
#FS1 div input:not(:checked) ~ #FS1-1, #FS1-2, #FS1-3 { display: none; } /* to hide all the detail elements */
#FS1 div input[value="1"]:checked ~ #FS1-1 { display: block; } /* to show only the 1th elem */
#FS1 div input[value="2"]:checked ~ #FS1-2 { display: block; } /* to show only the 2nd */
#FS1 div input[value="3"]:checked ~ #FS1-3 { display: block; } /* to show only the 3rd */
Now, what I want to achieve, is to relocate the fieldset outside the div, at the end of the fragment, but this brokes the css references and the fragment doesn't run anymore.
The following is the desired fragment, not running.
I need suggestions on how to redefine the CSS
<div id="FS1">External fieldset with radiobuttons
<div class="row">
<input checked="checked" id="R1" name="Group1" type="radio" value="1"/>
<label for="R1">Element 1</label>
<input id="R2" name="Group1" type="radio" value="2"/>
<label for="R2">Element 2</label>
<input id="R3" name="Group1" type="radio" value="3"/>
<label for="R3">Element 3</label>
</div>
<fieldset class="fs" id="FS1-1">
<legend>Header element 1</legend>
<div class="form-group">
<input class="form-control" id="exampleInputText1" type="text"/>
<label for="exampleInputText1">Input field in the first element</label></div>
</fieldset>
<fieldset class="fs" id="FS1-2">
<legend>Header element 2</legend>
<div class="form-group">
<input class="form-control" id="exampleInputText2" type="text"/>
<label for="exampleInputText2">This is the input field for the second</label>
</div>
</fieldset>
<fieldset class="fs" id="FS1-3">
<legend>Header element 3</legend>
<div class="form-group">
<input class="form-control" id="exampleInputText3" type="text"/>
<label for="exampleInputText3">And this is the last input field</label>
</div>
</fieldset>
</div>
So what you're asking cannot be achieved with plain CSS, but a solution could be achieved with Javascript.
Here is why it is not possible with your current HTML structure, as your current HTML structure looks like this:
With corresponding (simplified) code:
#FS1 div input:not(:checked) ~ #FS1-1, #FS1-2, #FS1-3 { display: none; } /* to hide all the detail elements */
#FS1 div input[value="1"]:checked ~ #FS1-1 { display: block; } /* to show only the 1th elem */
#FS1 div input[value="2"]:checked ~ #FS1-2 { display: block; } /* to show only the 2nd */
#FS1 div input[value="3"]:checked ~ #FS1-3 { display: block; } /* to show only the 3rd */
<div id="FS1">
<div class="row">
<input checked="checked" id="R1" name="Group1" type="radio" value="1"/>
<fieldset class="fs" id="FS1-1"></fieldset>
<fieldset class="fs" id="FS1-2"></fieldset>
<fieldset class="fs" id="FS1-3"></fieldset>
</div>
</div>
As a simple example, I will explain why this line of code works:
#FS1 div input[value="1"]:checked ~ #FS1-1 { display: block; }
Accesses id FS1
Accesses HTML entity div which is a child of FS1
Accesses the HTML entity input for state :checked and internal value="1"
Accesses the sibling element (~) of id FS1-1
Sets the property of display: block for FS1-1
The key thing to note is that the sibling element is selected.
With your proposed changesets to the HTML (see below), you would be required to access the parent element of the HTML entity input for state :checked and internal value="1" and then from there access the sibling, as FS1-1 no longer resides in the div class="row", rather outside it.
As per Wikipedia:
Some noted limitations of the current capabilities of CSS include:
Selectors are unable to ascend. CSS currently offers no way to select a parent or ancestor of an element that satisfies certain criteria.
This has also been touched on here: Is there a CSS parent selector?
There is currently no way to select the parent of an element in CSS. In the meantime, you'll have to resort to JavaScript if you need to select a parent element.
Honestly, it's probably not worth the fight, leave the fieldset inside the div class="row" if possible.
Here are the relevant resources if you wish to go ahead and convert this to a Javascript solution:
Javascript Parent Element
Set Style Javascript
Get Attribute Javascript
Next Sibling Javascript
I have an un-editable HTML, which cannot change anything.
I need to hide the first checkbox and the second one will show. It is done in CSS, but somehow it doesn't work as expected.
Here is its LIVE sample.
Please help.
.treeview-container .treeview-item:first-child .form-check label input[type="checkbox"] {
visibility: hidden;
}
<div class="treeview-container">
<div class="treeview-item">
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" />First Box
</label>
</div>
<div class="treeview-item">
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" />Second Box
</label>
</div>
</div>
</div>
</div>
The problem is that .treeview-item:first-child is targetting both of the checkboxes' respective .form-check containers (as they are both the first child of their parent .treeview-item).
This is perhaps a little counter-intuitive, as you may expect the :first-child pseudo-selector to only target the very first occurence of a child of .treeview-item. This is not the case, as the :first-child selector actually targets the first child of each of the .treeview-item parents.
In order to correct this, you can simply use two child combinator selectors (>) to ensure that .treeview-item is a direct child of .treeview-container, and .form-check is a direct child of that .treeview-item.
This can be seen in the following:
.treeview-container > .treeview-item > .form-check label input[type="checkbox"] {
visibility: hidden;
}
<div class="treeview-container">
<div class="treeview-item">
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" />First Box
</label>
</div>
<div class="treeview-item">
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" />Second Box
</label>
</div>
</div>
</div>
</div>
Hope this helps! :)
.treeview-item:first-of-type {
display: none;
}
You can create an ID and add it to any elements you want hidden. However this only hides the element. If you do not want the user to be able to change the checkbox you may want to remove that input type all together.
.treeview-container .treeview-item:first-child .form-check label input[type="checkbox"] {
visibility: hidden;
}
#hideMe {
display: none;
}
<div class="treeview-container">
<div class="treeview-item">
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" id = "hideMe"/>First Box
</label>
</div>
<div class="treeview-item">
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" />Second Box
</label>
</div>
</div>
</div>
</div>
Using child combinator (>) in between two selectors will select a direct child of the parent. Currently, your code is selecting both inputs as you are just checking for decendents ..ie if the input has an ancestor as .treeview-container or not.
So using two consecutive child combinator will help you get expected result.
Code below.
.treeview-container > div > .form-check label input[type="checkbox"] {
visibility: hidden;
}
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.
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>