Hi I have different check boxes and I want to have an image instead of the check boxes so if I click the image the background should change so as to indicate whether it is checked or not.
As I have different checkboxes so I cannot put the background as an image in the CSS.
Please suggest how should I go ahead.
See Here. You can apply this to your code and have the custom background
HTML:
<div class="amPmCheckbox">
<input type="checkbox" name="data[Child][remember_me]" class="checkboxLabel main_street_input" id="am_2" value="1" />
<label for="am_2">AM</label>
</div>
CSS:
.amPmCheckbox input[type="checkbox"] {
display: none;
}
.amPmCheckbox input[type="checkbox"]+label {
background: url('http://renegadeox.com/img/off.png') no-repeat;
height:17px;
padding-left: 18px;
}
.amPmCheckbox input[type="checkbox"]:checked + label {
background: url('http://renegadeox.com/img/on.png') no-repeat;
height:17px;
}
http://jsfiddle.net/JkDhN/1/
Related
I need to render radiobuttons on my site with specific background-images:
not checked
, checked
I solved this problem by adding the following styles for radiobutton elements:
{
width: 20px;
height: 20px;
-webkit-appearance: none;
background-image: url(/Images/notChackedRadioButton.png);
background-repeat: no-repeat;
}
Everything was fine, but when i open my site in Internet Explorer I see that all radiobuttons became black.
Seems like IE adds its own image above my background image, but I don't have any idea how to solve this. Please, any suggestions will be helpful.
Not knowing the rest of your code here is an example of a way you can do it. Works in IE 11 and IE Edge. Found on codepen for rest of the example - https://codepen.io/tutsplus/pen/bgqYJz
input[type="radio"] {
display:none;
}
input[type="radio"] + label span {
display:inline-block;
width:19px;
height:19px;
margin:-2px 10px 0 0;
vertical-align:middle;
background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/check_radio_sheet.png) -38px top no-repeat;
cursor:pointer;
}
input[type="radio"]:checked + label span {
background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/check_radio_sheet.png) -57px top no-repeat;
}
<input type="radio" id="r1" name="rr" />
<label for="r1"><span></span>Radio Button 1</label>
<p>
<input type="radio" id="r2" name="rr" />
<label for="r2"><span></span>Radio Button 2</label>
I am quite "newbie" on css and trying to change the color of FontAwesome icon when the main div is focused. I have tried several methods, tried to change its color using div's id or class on focus but none worked.
I have also tried active and hover state just to test, none worked aswell.
HTML
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 form-group">
<label for="username" class="..">User Field <span class="..">*</span></label>
<div id="test" class="has-feedback">
<input type="text" class="form-control" id="username" vk_1e5ee="subscribed">
<span class="fa fa-user form-control-feedback" aria-hidden="true"></span>
</div>
</div>
CSS
.form-control-feedback {
position: absolute;
top: 0;
right: 0;
z-index: 2;
display: block;
width: 34px;
height: 34px;
line-height: 34px;
text-align: center;
pointer-events: none;
}
.form-control:focus .form-control-feedback:focus {
color:red;
}
/*
#test:focus span .fa {
color:red;
}*/
JSFiddle Link: http://jsfiddle.net/xh8wsr5g/2/
I can change the color of main div when focused but cannot change the icon. What would you suggest me to do? Thanks in advance.
You just have to use the sibling selector.
Your font-awesome span is a sibling of textbox so following one is wont work
.form-control:focus {
color:red;
}
Instead of it you have to use following code
.form-control:focus + .form-control-feedback {
color:red;
}
See fiddle here : http://jsfiddle.net/xh8wsr5g/1/
So whenever the textbox is in focus the font-awesome span color will be red.
See this link for imformation about sibling selector
https://developer.mozilla.org/en/docs/Web/CSS/Adjacent_sibling_selectors
just add this code:
// to make the text color change
.form-control:focus {
color:red;
}
// to make the icon color change
.form-control:focus + .form-control-feedback {
color:red;
}
you can try this http://jsfiddle.net/xh8wsr5g/3/
You cannot accomplish this with css alone, .form-control-feedback is not a child of .form-control. Therefore there will be no element accessible through .form-control:focus .form-control-feedback:focus, try using jquery to change the color:
$('.form-control').focus(function(){
$('.form-control-feedback').css('color','red');
});
I have custom checkboxes I styled like buttons. When you click the label or input the div around it changes color. However, only the label and input are clickable.
Is there a way to make the entire div/button clickable (i.e. everything inside the border)?
Here's my code:
div.label {
border:solid 1px gray;
line-height:40px;
height:40px;
width: 250px;
border-radius:40px;
-webkit-font-smoothing: antialiased;
margin-top:10px;
font-family:Arial,Helvetica,sans-serif;
color:gray;
text-align:center;
}
label {
display:inline;
text-align:center;
}
input[type=checkbox] {
display: none;
}
input:checked + div {
border: solid 1px red;
color: #F00;
}
input:checked + div:before {
content: "\2713";
}
<input id="lists[Travel]" type="checkbox" name="lists[Travel]" />
<div class="label">
<label for="lists[Travel]">Travel</label> <br>
</div>
The answer is quite symple: you don't need an additional div-element. Actually you can place a label-element wherever you want and associate it with an input-element of your choice.
You do so by giving the input-element an id-attribute and associate the label-element with a corresponding for-attribute.
eg: <input id="my-input-id">[...]<label for="my-input-id">Label Text</label>)
A <label> can be associated with a control either by placing the control element inside the element, or by using the for attribute. Such a control is called the labeled control of the label element. One input can be associated with multiple labels.
Labels are not themselves directly associated with forms. They are only indirectly associated with forms through the controls with which they're associated.
When a <label> is clicked or tapped, and it is associated with a form control, the resulting click event is also raised for the associated control.
Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label
label {
display:block;
border:solid 1px gray;
line-height:40px;
height:40px;
width: 250px;
border-radius:40px;
-webkit-font-smoothing: antialiased;
margin-top:10px;
font-family:Arial,Helvetica,sans-serif;
color:gray;
text-align:center;
}
input[type=checkbox] {
display: none;
}
input:checked + label {
border: solid 1px red;
color: #F00;
}
input:checked + label:before {
content: "\2713 ";
}
/* new stuff */
.check {
visibility: hidden;
}
input:checked + label .check {
visibility: visible;
}
input.checkbox:checked + label:before {
content: "";
}
<input id="lists[Travel]" type="checkbox" name="lists[Travel]" />
<label for="lists[Travel]">Travel with jump</label>
<!-- alternatively avoid jumps between text of state checked and unchecked -->
<input class="checkbox" id="lists[new]" type="checkbox" name="lists[new]" />
<label for="lists[new]"><span class="check">✓</span> Travel without jump</label>
In addition you can fiddle around with the display: block of the <label>.
But this should be quite simple by giving it float: left, display: inline-block or whatever to get the desired elements float.
CODEPEN
Here's a one way to achieve this:
<div onclick="this.querySelector('input[type=checkbox]').click()">
<input type="checkbox" style="pointer-events:none">
<span>Label</span>
</div>
Or if you give the checkbox an id:
<div onclick="abc.click()">
<input id="abc" type="checkbox" style="pointer-events:none">
<span>Label</span>
</div>
You need pointer-events:none in this appraoch because otherwise a double-click (causing check and uncheck) happens when you click on the checkbox directly.
Hi I know this has been answered but I can't get it to work for me.
I have as HTML
<input type="hidden" name="data[Child][remember_me]" id="am_2_" value="0"/>
<input type="checkbox" name="data[Child][remember_me]" class="checkboxLabel main_street_input" id="am_2" value="1"/>
<label for="am_2"> </label>
and then
.amPmCheckbox input[type="checkbox"]{
display: none;}
.amPmCheckbox input[type="checkbox"]+label{
background: url('http://renegadeox.com/img/off.png') no-repeat; width:16px; height:17px;}
.amPmCheckbox input[type="checkbox"]:checked + label {
background: url('http://renegadeox.com/img/on.png');width:16px; height:17px;}
But it's not picking up the checked image. I can't figure out what's the problem, anyone any ideas? heres a fiddle btw
http://jsfiddle.net/ksCk8/
It picks up the checked image when the checkbox is checked. Issue you have is the fact nothing is clickable to make the checkbox checked.
Move the AM/PM into the label and use padding to shove it over instead of the spaces.
HTML:
<div class="amPmCheckbox">
<input type="checkbox" name="data[Child][remember_me]" class="checkboxLabel main_street_input" id="am_2" value="1" />
<label for="am_2">AM</label>
</div>
CSS:
.amPmCheckbox input[type="checkbox"] {
display: none;
}
.amPmCheckbox input[type="checkbox"]+label {
background: url('http://renegadeox.com/img/off.png') no-repeat;
height:17px;
padding-left: 18px;
}
.amPmCheckbox input[type="checkbox"]:checked + label {
background: url('http://renegadeox.com/img/on.png') no-repeat;
height:17px;
}
http://jsfiddle.net/JkDhN/1/
Please take a look at http://jsfiddle.net/JHMqG/
I'm trying to figure out how to change the background of the radio button when clicked.
So far, I've been successful with the cat option, but I'm stuck at the dog option. I need the dog option to work because I want the background change to include the circle button.
Please advise. Thank you.
Here you go: http://jsfiddle.net/JHMqG/1/
On the dog, the label element only contained the text. On the cat, the label element contained the text and the radio button. Also, I cleaned up your HTML a bit.
See this:
DEMO
I changed a bit the HTML:
<div>
<input type="radio" name=1 Value=420 id="a1">
<label for="a1" class="radiostyle" >Cat ($420)</label>
</div>
<div>
<input type="radio" name=1 Value=375 id="a2">
<label for="a2" class="radiostyle">Dog ($375)</label>
</div>
and added a few bits to the CSS, so it now looks like this:
div { margin: .5em; }
input, label {
position: relative;
display: inline-block;
vertical-align: middle;
}
input[type=radio] { margin-right: -1.65em; z-index: 2; }
.radiostyle{
background-color: #CCC;
border-radius: 8px;
padding: 4px 4px 4px 1.75em;
}
.radiostyle:hover{
background-color: #0F6;
cursor:pointer;
}
input[type=radio]:checked+label {
/* Or `#a1:checked+label` if you only want it for that input */
background-color: #0F6;
}
The problem was the <input> was just preceding the <label> in the cat option, but in the dog option the <input> was inside the<label.
I corrected it by moving the <input> of the dog option to be preceding the label, you can see it working here:
http://jsfiddle.net/SxPvz/