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.
Related
I want to make a CSS that will change the style of input type=radio. However, when I click another radio, the first one will still looked like that it is checked.
Here is my code and I tried to make the code as short as I can:
input[class=b][type=radio]:checked::before {
content: "";
display: block;
position: relative;
width: 12px;
height: 12px;
border: 2px solid red;
}
input[class=b][type=radio]:not(checked)::before {
content: "";
display: block;
position: relative;
width: 12px;
height: 12px;
border: 2px solid;
border-radius: 25px;
background: blue;
}
input[class=b][type=radio]:not(checked)::after {
content: "";
display: block;
visibility: hidden;
position: relative;
}
input[class=b][type=radio]:checked::after {
content: "";
display: block;
visibility: visible;
width: 5px;
height: 5px;
border: solid 2px red;
border-width: 5px 5px 5px 5px;
background: red;
border-radius: 25px;
position: relative;
transform: translateY(-15px)
}
HTML code:
<input type="radio" class="b" id="check1"><label for="check1">test</label>
<br>
<input type="radio" class="b" id="check2"><label for="check2">test2</label>
<p>They will both look like checked if you click each of them</p>
I wonder how to make it switch between checked and not checked by just using CSS. Also, I want the CSS event(such as :hover) of checked and not checked, because I want to change the style depending on its state.
The radio group must have share the same name (the value of the name attribute) to be treated as a group. Once the radio group is created, selecting any radio button in that group automatically deselects any other selected radio button in the same group. You can have as many radio groups on a page as you want, as long as each group has its own name.
<input type="radio" class="b" id="check1" name="test"><label for="check1">test</label>
<br>
<input type="radio" class="b" id="check2" name="test"><label for="check2">test2</label>
<p>They will both look like checked if you click each of them</p>
I've stumbled upon an interesting challenge in css which I can't seem to figure out.
I'm trying to make a form field, quite similar to what google does in their login form, where the label is moved relatively to to the top when the form field has focus, covering part of the form field's border. This is rather easy when the background is white, as I can just set background-color: #fff on the label.
In my case, however, I have a full-screen image background, which means my label background has to be transparent for the background-image, but has to cover the border of the form field. Is this possible?
This is my form markup:
<form>
<div class="form-field__container">
<div class="form-field__wrapper">
<label class="form-field__label input--active">Email</label>
<input class="form-field__input form-field__input--text"
type="text">
</div>
</div>
</form>
The form-field has a border around it:
.form-field__input {
border: 2px solid #e6e6e6;
}
The input--active class is set when the form field has focus, which adds the following styles to the label:
top: -10px;
left: 10px;
z-index: 1;
This moves my label over the top-border of the form field. Normally, I would then just add a background-color to the label which is the same as the page background, set a display: blockon that, and the label would cover the part of the form field border, which would solve my issue.
I do however have an image as a page background, which means I can't set a background-color on the label, because this would also cover a part of the page background. Is there any css property which allows me to have the label behave in a way that cuts out the part of the top border of the form-field which is below the label but doesn't cut away any of the background-image?
Below is an image of what I've got so far, for clarification:
I'd really appreciate the help.
Greetz derelektrischemoench
That's what you have fieldset and Legend for:
<fieldset>
<legend>
<label class="form-field__label input--active">Email</label>
</legend>
<input class="form-field__input form-field__input--text" type="text">
</fieldset>
here's an alternative hack that hides the top border completely and uses additional elements to create border to the left and right of the label text...
it's different than your approach and element structure, but it may give you some hints in how to use other elements to emulate a top border
body {
font-family: sans-serif;
background: linear-gradient(to top right, pink, orange);
}
input {
border: 2px solid black;
border-top: 0;
background: transparent;
}
input:focus {
outline: none;
border-color: blue;
}
label {
display: flex;
flex-direction: column;
}
label:focus-within .top-border-replacement:before,
label:focus-within .top-border-replacement:after {
border-color: blue;
}
label:focus-within .label-text {
color: blue;
}
.top-border-replacement {
display: flex;
}
.label-text {
position: relative;
bottom: -7px;
display: inline-block;
font-size: 12px;
padding: 0 4px;
font-weight: bold;
}
.top-border-replacement:before {
content: '';
width: 10px;
border-bottom: 2px solid black;
}
.top-border-replacement:after {
content: '';
width: 100%;
border-bottom: 2px solid black;
}
<label>
<span class="top-border-replacement">
<span class="label-text">TEST</span>
</span>
<input type="text" />
</label>
I have a checkbox and i would like to style it. When the checkbox is unchecked it should have a black border and when the checkbox is checked the hole checkbox should be black without hook. Below you see what i have done so far. Sadly it wont work.
My Code:
<form>
<input class="newsletter" type="checkbox" value="text">Ich möchte den Newsletter bekommen
</form>
input[type=checkbox]:not(old){
width : 13px;
margin : 0;
padding : 0;
opacity : 0;
}
.newsletter:unchecked{
width:13px;
height: 13px;
border: 2px solid black;
border-radius:3px;
}
.newsletter:checked{
width:13px;
height: 13px;
border: 2px solid black;
background-color:black;
border-radius:3px;
}
The first part of my code should hide the current checkbox. The second part should be the checkbox when the box is unchecked and the third part when the box is checked. I thought this is how you are styling these checkboxes. What am i doing wrong?
This may help you
.checkbox input[type=checkbox] {
display: none;
}
.checkbox input[type=checkbox]:not(:checked) + label:before {
content: "";
border: 2px solid #000;
height: 10px;
width: 10px;
display: inline-block;
}
.checkbox input[type=checkbox]:checked + label:before {
content: "";
border: 2px solid #000;
height: 10px;
width: 10px;
background: #000;
display: inline-block;
}
<form>
<div class="checkbox">
<input id="check" class="newsletter" type="checkbox" value="text">
<label for="check"> Ich möchte den Newsletter bekommen</label>
</div>
</form>
The first thing you need to do with your code is add a label, e.g.:
<form>
<input class="newsletter" type="checkbox" value="text" id="newsletter" name="newsletter">
<label for="newsletter">Ich möchte den Newsletter bekommen</label>
</form>
I've also added an id and name attribute to the checkbox. The id needs to be the same as the for attribute on the label for this trick to work.
Next, we need to visibly hide the checkbox. I tend to use a class of sr-only in the CSS to visibly hide things based on Yahoo's example:
.sr-only{
height: 1px;
width: 1px;
overflow: hidden
clip: rect(1px,1px,1px,1px);
position: absolute;
}
Next we create a pseudo element before the label. For the style rules I'm using the adjacent sibling selector (+) to apply the rules when the label is an adjacent sibling of the checkbox. I'm keeping your class name so it'll only target labels that're siblings of class newsletter:
.newsletter:not(checked) + label:before{
content:" ";
display: inline-block;
width:13px;
height: 13px;
border: 2px solid black;
border-radius:3px;
}
The :not(checked) means apply these rules when newsletter is not checked.
To change the styles when newsletter is checked we change the background colour like this:
.newsletter:checked + label:before{
background-color:black;
}
This way clicking our pseudo checkbox or the text in the label will check the box (clicking the label at all sends focus to the field, so with a checkbox will check it).
I'm trying to create a custom checkbox since its hard to style the native html checkbox so below is what I have tried. The checkbox is checked and unchecked when I click the label but I cant change the border color of the label when the input checkbox is checked and unchecked. Any help, ideas, suggestions, recommendations is greatly appreciated.
input[type="checkbox"]{display:none;}
label{
border:1px solid red;
width: 15px;
height:15px;
display:block;
}
label + input:checked{
border-color: blue;
}
<div>
<label>
<input type="checkbox">
</label>
</div>
You can't do what you want with that hierarchy (without JavaScript) as there is no parent selector. You'd need to move the label after the checkbox and then use the adjacent sibling combinator +:
input[type="checkbox"] {
display: none;
}
label {
border: 1px solid red;
width: 15px;
height: 15px;
display: block;
}
input:checked + label{
border-color: blue;
}
<div>
<input id="cb" type="checkbox">
<label for="cb"></label>
</div>
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