I am using JAWS to read ARIA-LABEL for the checkbox.
This checkbox has the opacity as 0. basically we are displaying another label instead of the checkbox to get a customized look for the checkbox.We capture the click on the hidden checkbox and display the label which displays it as a checkbox with filled color and a checked symbol.
Click is captured when we click the checkbox along with the Compare label following it.(trapping the click event on the span, which has the checkbox and the label both)
JAWS is not able to read the ARIA-LABEL ="Select to add the item to comparison list"
I am not sure what would be the correct location to place this label in order to be read JAWS.
<span class="newCheckbox" tabindex="0" (keyup)="OnPressCompareClick(productDetails?.Id,$event)">
<input type="checkbox" [value]="compareListCount" [checked]="isAddedInCompare(productDetails?.Id)" (change)="OnChangeUpdateProductCompareList(productDetails?.Id, $event)" (click)="onCompareClick($event)"
style="display:block;margin-top:14px;position:absolute;" role="checkbox"
id="chkAddCompare" >
<label aria-label="Select to add the item to comparison list" class="compare-defaultFont" attr.for="Compare{{i}}" > Compare</label>
</span>
.newCheckbox input[type=checkbox] {
display: none;
opacity: 0;
}
.newCheckbox label:before {
content: "";
text-shadow: 0px 0px 0px #fff;
color: #fff;
width: 14px;
height: 14px;
border: 1px solid #0075d5;
background-color: #fff;
border-radius: 0px;
font-weight: 400 !important;
font-family: 'Segoe UI Light', Tahoma, Geneva, Verdana, sans-serif !important;
color: #555;
font-size: 14px !important;
display: inline-block;
vertical-align: -2px;
}
input[type=checkbox]:checked + label:before {
content: "\2713";
text-shadow: 0px 0px 0px #fff;
font-size: 14px;
color: #fff;
text-align: left;
width: 14px;
height: 14px;
line-height: 15px;
border: 1px solid #0075d5;
background-color: #0075d5;
vertical-align: -2px;
}
Put the aria-label on the control itself, not on the <label> element.
I don't know which language you are using, but apparently, the id of the input does not match the for attribute of the label tag, according to your code:
<input type="checkbox" id="chkAddCompare" >
<label aria-label="Select to add..." [...] attr.for="Compare{{i}}" > Compare</label>
You can easily enclose the input tag in your label:
<label [...]> Compare
<input type="checkbox" aria-label="Select to add...">
</label>
Try this, worked for me on an accordion with hidden checkbox
<label id="mylabel" aria-label="For check box"></label>
<input type="checkbox" id="chkAddCompare" aria-labelledby="mylabel" >
Also note the label must come BEFORE the control.
Related
I use custom radio buttons which I need to verify via HTML5 form verification. Each option has the required attribute. The CSS :invalid selector should then color the border of the span covering the button in red as soon as the user clicks the form submit button. Unfortunately, the border gets colored on-load of the page, submit button hasn't been even clicked. Any ideas?
input[type="radio"] {
opacity: 0;
position: absolute;
z-index: -1;
}
label input[type="radio"]:checked+.form-btn-radio {
background-color: blue;
text-decoration: none;
color: white;
border: 2px solid blue;
}
label input[type="radio"]:invalid+.form-btn-radio {
border: 2px solid red;
}
.form-btn-radio {
border: 2px solid black;
color: black;
padding: 10px 25px 10px 25px;
min-width: 60px;
background-color: white;
text-decoration: none;
text-align: center;
display: inline-block;
cursor: pointer;
}
<label for="apply">
<input type="radio" id="apply" name="apply" value="easy" required>
<div class="form-btn-radio">Option 1 Name</div>
</label>
<label for="apply-external">
<input type="radio" id="apply" name="apply" value="url" required>
<div class="form-btn-radio">Option 2 Name</div>
</label>
found the issue: "If any one of the radio buttons in a group is required, the :invalid pseudo-class is applied to all of them if none of the buttons in the group is selected. (Grouped radio buttons share the same value for their name attribute.)"
developer.mozilla.org/en-US/docs/Web/CSS/:invalid
So JS is the only solution if you don't want to have one of the radios pre-selected.
I would like to make the input of the checkbox colored, but it wont allow me. It needs to be disabled, because I don't want it to be clickable.
https://jsfiddle.net/x7ujvm4f/
<p>
<label class="disabled-label"><input type="checkbox" class="disabled-checkbox" checked="checked" disabled="disabled"/>Disabled Checkbox</label>
</p>
Here is what I did:
.disabled-label:after {
content: " ";
background-color: #00A0D1;
display: inline-block;
visibility: visible;
}
.disabled-label:checked:after {
content: '✔';
box-shadow: 0px 2px 4px rgba(155, 155, 155, 0.15);
border-radius: 3px;
height: 13px;
display: block;
width: 13px;
text-align: center;
font-size: 9px;
color: white;
}
As per W3C we cant modifies radio or checkbox color or shape. so, in that case, we need to design your own control which looks and feel like checkbox or radio button.
its very simple please refer this like.
https://www.w3schools.com/howto/howto_css_custom_checkbox.asp
Before I start crying, could someone please explain why none of the attempted CSS soltions for styling a submit button have any effect at all? I've gone for font-size: 50px to make it obvious if I hit the right element, which I haven't yet:
input[type="submit"].wysija-submit {
border-radius: 10px;
border: none;
box-shadow: none;
font-family: inherit;
font-size: 50px!important;
}
.wysija-submit input[type="submit"] {
border-radius: 10px;
border: none;
box-shadow: none;
font-family: inherit;
font-size: 50px!important;
}
.wysija-submit.wysija-submit-field input[type="submit"] {
border-radius: 10px;
border: none;
box-shadow: none;
font-family: inherit;
font-size: 50px!important;
}
<input class="wysija-submit wysija-submit-field" type="submit" value="Sign-up">
This one does work.
input[type="submit"].wysija-submit {
border-radius: 10px;
border: none;
box-shadow: none;
font-family: inherit;
font-size: 50px!important;
}
<input class="wysija-submit wysija-submit-field" type="submit" value="Sign-up">
.wysija-submit input[type="submit"] and .wysija-submit.wysija-submit-field input[type="submit"] contain descendant combinators so they won't match because the left hand side matches the input, then the right hand side matches nothing because inputs can't have descendants.
The space character in CSS is the Descendant Combinator. It tells your CSS compiler to select any descendant of the previous selector.
What your current selector is doing is trying to select any element with a class attribute containing .wysija-submit.wysija-submit-field, then it's trying to find an input element whose type is submit inside that element. This would work for the following markup:
<elem class="wysija-submit wysija-submit-field">
<input type="submit" />
</elem>
To get this to select the input element whose type is submit and whose class contains wysija-submit and wysija-submit-field, you'll need to change your selector from:
.wysija-submit.wysija-submit-field input[type="submit"] { ... }
To:
input[type="submit"].wysija-submit.wysija-submit-field { ... }
I created a custom checkbox with basically an icon inside a checkbox. The icon is a font from flaticon so that I can easily change size and color. Unfortunately the checkbox is shown in Chrome and Safari but not in Firefox and IE.
Here is a sample of my code:
CSS: Custom Checkbox
#checkicons input[type=checkbox]{
visibility: hidden*/
height: 80px;
line-height: 1.4;
}
#checkicons input[type=checkbox]:checked:after, input[type=checkbox]:after{
visibility: visible;
font-size:50px;
margin-left: -36px;
padding: 15px;
border-radius: 8px;
line-height: 1.4;
}
#checkicons input[type=checkbox]:checked:after{
color: white;
border: solid black;
background-color: #1e6e11;
border-width: 1px;
}
#checkicons input[type=checkbox]:after{
color: #1e6e11;
border: solid #1e6e11;
background-color: white;
border-width: 1px;
}
#checkicons label{
max-width: 90px;
}
Html: Checkbox
<div id="checkicons">
<input type="checkbox" class="flaticon-leisure4" id="housecare" name="housecare" onchange="toggleDiv(this)"></input><br>
<label for="housecare">House care</label>
</div>
CSS: Flaticon
#font-face {
...url to fonts...
font-weight: normal;
font-style: normal;
}
[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
[class^="flaticon-"]:after, [class*=" flaticon-"]:after {
font-family: Flaticon;
.flaticon-leisure4:after {
content: "\e00f";
}
I did some tests on the code while trying to fix this issue. The behavior on Firefox and Safari is the same like I would delete the class in the html of the checkbox.
Here I do have two screenshots of the result. The first is working with chrome, the second is the not working version with firefox and IE which equals with the result if I would delete the code 'class="flaticon-leisure4"' from the html.
Result on Chrome, Safari
Result on Firefox, IE
I would be happy If I can solve this problem or if you can give me alternative suggestions.
Pseudo elements are only working for container elements. Therefore I changed the customized checkbox to a label. Instead of the customized checkbox I just following code
CSS: Custom Icon
#checkicons .icon{
max-width: 90px;
font-family: Flaticon;
font-size:50px;
margin-left: -36px;
padding: 5px 15px 5px 15px;
border-radius: 8px;
line-height: 1.4;
color: #1e6e11;
border: solid black;
background-color: white;
border-width: 1px;
}
New HTML
<input type="checkbox" id="housecare" name="housecare" onchange="toggleDiv(this); toggleIcon('houseCareIcon')">
<label for="housecare" id="houseCareIcon" name="houseCareIcon" class="flaticon-leisure4 icon"></label>
<label for="housecare">House Care</label>
</input>
The color handling whether the label should look like checked or not checked is now done with JavaScript.
Javascript: Check Color Handling
function toggleIcon(obj, checkobj){
if(document.getElementById(checkobj.id).checked){
document.getElementById(obj).style.color='white';
document.getElementById(obj).style.backgroundColor='#1e6e11';
}else{
document.getElementById(obj).style.color='#1e6e11';
document.getElementById(obj).style.backgroundColor='white';
}
}
Thanks Hidden Hobbes for the "inspiration"!
So, I've been stuck at this for a couple of hours. I'm essentially trying to get a checkbox to work as a toggle button. I want the styles applied by jquery to be only applied when it's checked and back to it's initial if it has been deselected.
The HTML markup:
<form class="simple_form new_mailing_list_form" data-remote="true" id="new_mailing_list_form" method="post">
<div class="input boolean optional mailing_list_form_opt_in">
<input name="mailing_list_form[opt_in]" type="hidden" value="0">
<label class="boolean optional control-label checkbox toggle-button" for="mailing_list_form_opt_in">
<input checked="checked" class="boolean optional" id="mailing_list_form_opt_in" name="mailing_list_form[opt_in]" type="checkbox" value="1">
Yes, I would like to join the mailing list.
</label>
</div>
The SCSS:
#new_mailing_list_form {
.opt {
color: $white;
background-color: $selectiveYellow !important;
border: 2px solid $selectiveYellow !important;
}
.checkbox {
margin: 0px;
padding: 0px;
}
div label input {
margin-right:100px;
}
.mailing_list_form_opt_in label {
cursor: pointer;
background: transparent;
border: 2px solid $selectiveYellow;
border-radius:2px;
font-size: 15px;
font-weight: normal;
line-height: 1.4;
overflow:auto;
margin:4px;
padding: 8px 15px;
width: auto;
&:hover {
background-color: $sunglow;
border: 2px solid $sunglow;
color: $white;
}
}
.mailing_list_form_opt_in label {
display:block;
}
.mailing_list_form_opt_in label input {
display: none;
}
.mailing_list_form_opt_in input:checked {
background-color:$selectiveYellow;
color:$white;
}
}
JQuery:
$('#mailing_list_form_opt_in').change(function () {
$(this).parent().css({ 'background-color':'#ffbb00','border':'2px solid #ffbb00', 'color':'#fff' });
});
I've tried using a conditional statement as well, but I start to descend into spaghetti JQuery which doesn't even work.
Work on it so far: Working CodePen link
You could use jQuery's toggleClass() method to change the background whenever a user clicks the element.
$("#checkbox_elem").on( "click", function(){
$(this).toggleClass( 'background-class' );
});
Now all you have to do is have a default style on the element, and place the new CSS rules into the background-class class definition. Clicking the element will toggle the class on the element.
You could use an explicit check on the element if you want to add some more functionality:
$("#checkbox_elem").on( "click", function(){
if ( $(this).is(':checked') ){
// the checkbox is marked as "checked"
// here you can manipulate the style accordingly
}else{
// the checkbox is NOT marked as "checked"
// here you can manipulate the style accordingly
}
});
So, I'm sharing my pure HTML5/CSS3 solution (which doesn't use any JS/JQuery!) to this problem so that it could be helpful for others stuck on something similar.
I refactored my markup as follows,
HTML:
<input id="mailing_list_form_opt_in" name="mailing_list_form[opt_in]" type="checkbox" value="1">
<label for="mailing_list_form_opt_in">Yes, I would like to join the mailing list.</label>
and for the styles, I used the adjacent selector + & the pseudo class :checked to show the behavior on that state. The corresponding styles for that are as follows,
SCSS:
input[type=checkbox] + label {
background: transparent;
border: 2px solid $selectiveYellow;
border-radius: 2px;
-webkit-font-smoothing: subpixel-antialiased;
font-size: 15px;
font-weight: normal;
line-height: 1.4;
overflow: auto;
margin: 4px;
padding: 8px 15px;
#include transition( 0.25s linear);
width: auto;
&:hover {
background-color: $sunglow;
border: 2px solid $sunglow;
color: $white;
}
}
input[type=checkbox]:checked + label {
background: $selectiveYellow !important;
border: 2px solid $selectiveYellow !important;
color: $white;
}
input[type=checkbox] {
display: none;
}
Works perfectly, added a Codepen so that you can check that out as well! Hope this helps others! :D