How can I change the radio button 'selected' state appearance? - html

I have customized the radio buttons for the product attributes on a Prestashop store but now the selected size does not change appearance (desired background:#000;color:#fff) when selected.
Product page here: http://catwalk-boutique.ro/pantofi/11-pantofi-piele-4578-burgundy.html
What I want to find out is either where to edit the "selected" state of the radio button or what could block the display of the selected state (if that is the case).
Below are the bits of code altered so far:
• in product.tpl:
{elseif ($group.group_type == 'radio')}
<ul style="padding-left:5px">{assign var=groupquantity value= $group.attributes_quantity}
{foreach from=$group.attributes key=id_attribute item=group_attribute}
<li>
<input id="radio_{$groupName|escape:'html':'UTF-8'}-{$id_attribute}" type="radio" class="attribute_radio" name="{$groupName|escape:'html':'UTF-8'}" value="{$id_attribute}" {if ($group.default == $id_attribute)} checked="checked"{/if} />
<label for="radio_{$groupName|escape:'html':'UTF-8'}-{$id_attribute}" data-comb-quantity="{*$groupquantity[$id_attribute]*}{foreach from=$combinations item=foo}{if $group_attribute == $foo.attributes_values[2]}{$foo.quantity}{/if}{/foreach}" class="radio_btn_round" >{$group_attribute|replace:' EU':''|escape:'html':'UTF-8'}</label>
</li>
{/foreach}
</ul>
{/if}
• and the CSS:
label.radio_btn_round {
background-color: #F8F8F8;
border: 1px solid #C8CCD2;
width: 30px;
height: 30px;
text-align: center;
vertical-align: middle!important;
line-height: 29px;}
input.attribute_radio {display: none;}
Any ideas are much appreciated. Thanks.

The markup that Prestashop has generated for this makes this not possible with straight CSS:
<li>
<div>
<span class="checked"><input value="37" selected></span>
</div>
<label>37</label>
</li>
CSS has no way of going "up" the DOM (selecting the parent div or li from the "selected" radio button).
Because jQuery is available on your site, I think your best bet is to add some light jQuery that can do this for you, and provide a class on the label which you can then address via CSS:
// wait until the document is ready
jQuery(function($) {
// watch for changes to the radio inputs
$(document).on('change', 'input[type="radio"]', function() {
$('.attribute_list li')
// remove the class from all li elements
.removeClass('checked')
// find the "checked" radio button
.find('input[type="radio"]:checked')
// go up the dom to the nearest li
.closest('li')
// and add the "checked" class
.addClass('checked');
});
});
Then, in your CSS, this selector will allow you to change the styles you want:
li.checked label.radio_btn_round {
background: #000;
color: white;
}

Related

CSS to style a non-unique button class

I'm trying to style this button with CSS. It's used on a Cart Page and other areas throughout the site. On the cart page its "name" element is unique name="calc_shipping". However, because the class is not unique if I try to style it using the current class it naturally changes the style of all similar buttons.
Question: Is it possible to somehow use the name="calc_shipping" element in my CSS modification to style this button specifically?
<button type="submit" name="calc_shipping" value="1" class="fusion-button button-default fusion-button-default-size button">Update totals</button>
Thanks for any suggestions! I've been racking my head on this for hours.
ch
You can simply add an ID to this specific button. I'll for example use ID "calc_shipping_btn"
<button type="submit" name="calc_shipping" value="1" id="calc_shipping_btn" class="fusion-button button-default fusion-button-default-size button">Update totals</button>
The CSS for this would be:
#calc_shipping_btn {
background-color: #00FF00;
color: #FFF;
}
If you don't want to add an ID you can target this specific button with this CSS:
button[name="calc_shipping"] {
background-color: #00FF00;
color: #FFF;
}
Add !important after every rule if they refuse to style the element. This helps override the class' css.
if your button has unique parent section as div or span for example parent-section class you can add style to button this example
.parent-section button{
...
}

Checkbox inline with dropdown option

I am trying to position a checkbox on the right side of a dropdown
<li>
<a class="drop-option" data-toggle="tab" href="#bizq">Business</a>
<input type="checkbox" value="" style="display: inline; float: right">
</li>
What I'm trying to have is the checkbox be a separate entity from the actual option itself. So that when I click on the option it goes to a page, and when I toggle the checkbox it does something else.
Essentially the goal is to have multiple pages with iframes. Each time I go to a page it load the iframe. If the checkbox is checked then the iframe can be persistent instead of getting destroyed each time a page is switched.
Should look something like this:
when I click on the option it goes to a page, and when I toggle the checkbox it does something else.
This can be implemented by following steps:
Add event listener to the option element.
When option element is clicked, check whether user clicks the checkbox inside the option. If it is the checkbox clicked, do nothing. Otherwise, go to step 3.
Check the current option element's checkbox status. Do different things according to different checkbox status.
Here is a code snippet:
var $option = $('a.option');
$option.on('click', function(e) {
var $target = $(e.target);
var $this = $(this);
if ($target.hasClass('toggle')) {
// checkbox clicked.
return;
}
var childToggle = $this.find('input.toggle').prop('checked');
var label = $this.find('.label').text();
if (childToggle) {
alert('Page ' + label + ' clicked, WITH checkbox checked.');
} else {
alert('Page ' + label + ' clicked, WITHOUT checkbox checked.');
}
});
ul>li {
list-style: none;
}
a.option {
background: darkcyan;
color: white;
display: block;
width: 100px;
padding: 10px;
text-decoration: none;
border-bottom: 1px solid white;
}
a.option input.toggle {
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<a href="javascript:;" class="option">
<span class="label">Business</span>
<input type="checkbox" class="toggle" value="isSelected">
</a>
</li>
<li>
<a href="javascript:;" class="option">
<span class="label">Tech</span>
<input type="checkbox" class="toggle" value="isSelected">
</a>
</li>
</ul>

How to keep :active css style after click a button

Once the button is clicked I want it to stay with the active style instead of going back to normal style. Can this be done with CSS please? Im using blurb button from DIVI Theme (WordPress). Please help me!
code:
#blurb-hover.et_pb_blurb .et_pb_blurb_content
.et_pb_main_blurb_image .et-pb-icon:hover {
color: red !important; }
#blurb-hover.et_pb_blurb .et_pb_blurb_content
.et_pb_main_blurb_image .et-pb-icon:selected {
background-color: #ff4b46;
color: #fff; }
#blurb-hover.et_pb_blurb .et_pb_blurb_content
.et_pb_main_blurb_image .et-pb-icon:active {
color: white !important;
background-color: red;
width: 140px;
height: 100px; }
CSS
:active denotes the interaction state (so for a button will be applied during press), :focus may be a better choice here. However, the styling will be lost once another element gains focus.
The final potential alternative using CSS would be to use :target, assuming the items being clicked are setting routes (e.g. anchors) within the page- however this can be interrupted if you are using routing (e.g. Angular), however this doesnt seem the case here.
.active:active {
color: red;
}
.focus:focus {
color: red;
}
:target {
color: red;
}
<button class='active'>Active</button>
<button class='focus'>Focus</button>
<a href='#target1' id='target1' class='target'>Target 1</a>
<a href='#target2' id='target2' class='target'>Target 2</a>
<a href='#target3' id='target3' class='target'>Target 3</a>
Javascript / jQuery
As such, there is no way in CSS to absolutely toggle a styled state- if none of the above work for you, you will either need to combine with a change in your HTML (e.g. based on a checkbox) or programatically apply/remove a class using e.g. jQuery
$('button').on('click', function(){
$('button').removeClass('selected');
$(this).addClass('selected');
});
button.selected{
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Item</button><button>Item</button><button>Item</button>
We're going to to be using a hidden checkbox.
This example includes one "on click - off click 'hover / active' state"
--
To make content itself clickable:
HTML
<input type="checkbox" id="activate-div">
<label for="activate-div">
<div class="my-div">
//MY DIV CONTENT
</div>
</label>
CSS
#activate-div{display:none}
.my-div{background-color:#FFF}
#activate-div:checked ~ label
.my-div{background-color:#000}
To make button change content:
HTML
<input type="checkbox" id="activate-div">
<div class="my-div">
//MY DIV CONTENT
</div>
<label for="activate-div">
//MY BUTTON STUFF
</label>
CSS
#activate-div{display:none}
.my-div{background-color:#FFF}
#activate-div:checked +
.my-div{background-color:#000}
Hope it helps!!
In the Divi Theme Documentation, it says that the theme comes with access to 'ePanel' which also has an 'Integration' section.
You should be able to add this code:
<script>
$( ".et-pb-icon" ).click(function() {
$( this ).toggleClass( "active" );
});
</script>
into the the box that says 'Add code to the head of your blog' under the 'Integration' tab, which should get the jQuery working.
Then, you should be able to style your class to what ever you need.

How to target an outer Div when checkbox is checked

I want to target a div when a checkbox is checked. Can anybody tell me how can I target an outer div when checkbox is checked?
if($('.checkboxClassName').checked) {
$(this).parent();
}
It will target the parent div that the checkbox is inside, you can use more .parent() if tour target is not inside the same parent.
example: if your code is like this:
<div class="container">
<div class="target"></div>
<div class="parent">
<div class="checkboxDiv">
<input type="checkbox">
</div>
</div>
</div>
and you want to target the div.target you'll need the code like this:
if($('.checkboxClassName').checked) {
$(this).parent().parent().parent().find(".target").css('background','magenta');
} else {
$(this).parent().parent().parent().find(".target").css('background','cyan');
}
those parents will work like this: $(this).parent() = targeting div.checkboxDiv
$(this).parent().parent() = targeting div.parent
...
Note how this jsFiddle highlights the usage in a very simple way:
A check box is focused upon (checked).
The CSS style :checked catches this occurrence and applies a CSS style to the div contents.
The div can be another element you want, just make sure you play around with the code and adapt it to your needs. Let us know if you need any more help!
Source: :checked
HTML
<input type="checkbox" id="ossm" name="ossm">
<label for="ossm">CSS is Awesome</label>
CSS
input[type=checkbox] + label {
color: #ccc;
font-style: italic;
}
input[type=checkbox]:checked + label {
color: #f00;
font-style: normal;
}
Edit: I thought you would like a reference to 'how' CSS works here:
Attribute Selector by value
Element plus Element
...and in general CSS selectors

How can I use the FOR attribute of a LABEL tag without the ID attribute on the INPUT tag

Is there a solution to the problem illustrated in the code below? Start by opening the code in a browser to get straight to the point and not have to look through all that code before knowing what you're looking for.
<html>
<head>
<title>Input ID creates problems</title>
<style type="text/css">
#prologue, #summary { margin: 5em; }
</style>
</head>
<body>
<h1>Input ID creates a bug</h1>
<p id="prologue">
In this example, I make a list of checkboxes representing things which could appear in a book. If you want some in your book, you check them:
</p>
<form>
<ul>
<li>
<input type="checkbox" id="prologue" />
<label for="prologue">prologue</label>
</li>
<li>
<input type="checkbox" id="chapter" />
<label for="chapter">chapter</label>
</li>
<li>
<input type="checkbox" id="summary" />
<label for="summary">summary</label>
</li>
<li>
<input type="checkbox" id="etc" />
<label for="etc">etc</label>
<label>
</li>
</ul>
</form>
<p id="summary">
For each checkbox, I want to assign an ID so that clicking a label checks the corresponding checkbox. The problems occur when other elements in the page already use those IDs. In this case, a CSS declaration was made to add margins to the two paragraphs which IDs are "prologue" and "summary", but because of the IDs given to the checkboxes, the checkboxes named "prologue" and "summary" are also affected by this declaration. The following links simply call a javascript function which writes out the element whose id is prologue and summary, respectively. In the first case (prologue), the script writes out [object HTMLParagraphElement], because the first element found with id "prologue" is a paragraph. But in the second case (summary), the script writes out [object HTMLInputElement] because the first element found with id "summary" is an input. In the case of another script, the consequences of this mix up could have been much more dramatic. Now try clicking on the label prologue in the list above. It does not check the checkbox as clicking on any other label. This is because it finds the paragraph whose ID is also "prologue" and tries to check that instead. By the way, if there were another checkbox whose id was "prologue", then clicking on the label would check the one which appears first in the code.
</p>
<p>
An easy fix for this would be to chose other IDs for the checkboxes, but this doesn't apply if these IDs are given dynamically, by a php script for example.
Another easy fix for this would be to write labels like this:
<pre>
<label><input type="checkbox" />prologue</label>
</pre>
and not need to give an ID to the checkboxes. But this only works if the label and checkbox are next to each other.
</p>
<p>
Well, that's the problem. I guess the ideal solution would be to link a label to a checkboxe using another mechanism (not using ID). I think the perfect way to do this would be to match a label to the input element whose NAME (not ID) is the same as the label's FOR attribute. What do you think?
</p>
</body>
</html>
it's been resolved here:
https://stackoverflow.com/a/8537641
just do it like this
<label><input type="checkbox">Some text</label>
The best, to my mind, what you can do, is to rename all the checkboxes, by adding some prefix to their ids, for example input
<ul>
<li>
<input type="checkbox" id="input_prologue" />
<label for="input_prologue">prologue</label>
</li>
<li>
<input type="checkbox" id="input_chapter" />
<label for="input_chapter">chapter</label>
</li>
<li>
<input type="checkbox" id="input_summary" />
<label for="input_summary">summary</label>
</li>
<li>
<input type="checkbox" id="input_etc" />
<label for="input_etc">etc</label>
</li>
</ul>
This way you will not have any conflicts with other ids on a page, and clicking the label will toggle the checkbox without any special javascript function.
EDIT: In retrospect, my solution is far from ideal. I recommend that you instead leverage "implicit label association" as shown in this answer: stackoverflow.com/a/8537641/884734
My proposed, less-than-ideal solution is below:
This problem can be easily solved with a little javascript. Just throw the following code in one of your page's js files to give <label> tags the following behavior:
When a label is clicked:
If there is an element on the page with an id matching the label's for attribute, revert to default functionality and focus that input.
If no match was found using id, look for a sibling of the label with a class matching the label's for attribute, and focus it.
This means that you can lay out your forms like this:
<form>
<label for="login-validation-form-email">Email Address:</label>
<input type="text" class="login-validation-form-email" />
</form>
Alas, the actual code:
$(function(){
$('body').on('click', 'label', function(e){
var labelFor = $( this ).attr('for');
if( !document.getElementById(labelFor) ){
e.preventDefault(); e.stopPropagation();
var input = $( this ).siblings('.'+labelFor);
if( input )
input[0].focus();
}
})
});
Note: This may cause issues when validating your site against the W3C spec, since the <label> for attribute is supposed to always have a corresponding element on the page with a matching ID.
Hope this helps!
Simply put, an ID is only supposed to be used once on a page, so no they wouldn't design a workaround for multiple ID's on a single page which aren't supposed to exist.
To answer the rest of the question: no, the ID attribute is the only thing a label's 'for' attribute will look at. You can always use a JavaScript onclick event to fetch the input by name and change it, though that seems overly complicated when you can just fix your ID issue, which would make a lot more sense.
Maybe easy straightforward solution would be using uniqueid() php or other programming language alternative function.
Unlike the accepted answer, I agree with the solution proposed by FantomX1, generate a random id for every checkbox and use this id for the label associated to the checkbox.
But I would generate the random id using a uuid (see Create GUID / UUID in JavaScript?)
i was struggling with this today and thought i could share my result, because it seems there're no others in googles top-ranks. So here's my first Stack-Post (the trick is to stretch the checkbox over the other elements but keeping them clickable by using z-index):
first: credits for the base accordion:
https://code-boxx.com/simple-responsive-accordion-pure-css/
.tab{
position: relative;
max-width: 600px;
z-index:1;
}
.tab input{
padding: 100%;
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
z-index:2;
cursor: pointer;
}
.tab label{
display: block;
margin-top: 10px;
padding: 10px;
color: #fff;
font-weight: bold;
background: #2d5faf;
}
.tab label span{
position:relative;
z-index:3;
cursor:text;
}
.tab .tab-content{
position:relative;
background: #ccdef9;
overflow: hidden;
transition: max-height 0.3s;
max-height: 0;
z-index:3;
}
.tab .tab-content p{
padding: 10px;
}
.tab input:checked ~ .tab-content{
max-height: 100vh;
}
.tab label::after{
content: "\25b6";
position: absolute;
right: 10px;
top: 10px;
display: block;
transition: all 0.4s;
}
.tab input:checked ~ label::after{
transform: rotate(90deg);
}
<div>
<div class="tab">
<input type="checkbox">
<label><span>Tab 1</span></label>
<div class="tab-content"><p>Should the pace attack?</p></div>
</div>
<div class="tab">
<input type="checkbox">
<label><span>Tab 2</span></label>
<div class="tab-content"><p>Some other Text</p></div>
</div>
</div>
EDIT:
sorry for not answering the original question but i'm on work and i think the principle is clear, right?