I have made a check box which is used to select various items available to choose from
When any of the check boxes is clicked, the first one get checked leaving the clicked one unchecked.
CSS
.checkbox {
overflow: hidden;
clip: rect(0 0 0 0);
height:1px;
width:1px;
padding:0;
border:0;
position:absolute;
}
.checkbox + label.label {
padding-left:20px;
height:15px;
display:inline-block;
margin-top:3px;
background-repeat:no-repeat;
background-position: 0 0;
font-size:11px;
vertical-align:middle;
cursor:pointer;
float:right;
}
.checkbox:checked + label.label {
background-position: 0 -15px;
}
.label{
background-image:url(images/dark-check-green.png);
color:white;
font-size:11px;
font-weight:100;
}
HTML
<input id="tick" class="checkbox" type="checkbox" />
<label for="tick" name="tick_box" class="label"></label>
Using the same for="" attribute for all the labels will result in unwanted and weird behaviour. You should make sure its different for each label + checkbox.
Example:
<input id="tick1" class="checkbox" type="checkbox" />
<label for="tick1" name="tick_box" class="label"></label>
<input id="tick2" class="checkbox" type="checkbox" />
<label for="tick2" name="tick_box" class="label"></label>
<input id="tick3" class="checkbox" type="checkbox" />
<label for="tick3" name="tick_box" class="label"></label>
Related
I want to have 8 radio buttons in one image. To be more specific i want to have an image of hawaai islands. Different radio button every island so i can choose one. Thank you very much
You should use absolute position then.
div {
height:400px;
width: 400px;
background: #124578;
position: relative;
}
#radio01 {
position:absolute;
left:0;
top:50%;
}
#radio02 {
position:absolute;
left:calc(100% - 25px);
top:25%;
}
#radio03 {
position:absolute;
left:50%;
top:70%;
}
<div>
<form action="">
<input type="radio" id="radio01" name="radio" />
<input type="radio" id="radio02" name="radio" />
<input type="radio" id="radio03" name="radio" />
</form>
</div>
UPDATE: I solved the problem by making inputs visible for browser but not for user. Making those changes to CSS worked.
.radio-checked {
opacity:0;
position: absolute;
z-index: -1;
}
QUESTION:
I have custom inputs in my form. I hide them with...
display:none;
...then styling with css to look different.
Example of my codes:
<input id="radio-input" class="radio-check" type="radio" name="odeme">
<label for="radio-input" class="radio-label">Option Name</label>
Here is a fiddle for showing how it works.
https://jsfiddle.net/kjaL1zbd/
Problem is, when you hide the input element the validation message is won't show up. You can see example here:
https://jsfiddle.net/kjaL1zbd/1/
So is there any way to show this message on the label? Or is there any solution for this?
/* RADIO CUSTOM */
form {
position: relative;
display: block;
}
.radio-check {
//visibility:collapse;
margin-left: 22px;
}
.test {
margin-left: 110px;
}
.radio-label {
position:absolute;
padding-left:20px;
//margin:10px 40px 10px 0px;
cursor:pointer;
left:20px;
}
.radio-label:before {
content:"";
display:block;
width:15px;
height:15px;
background-color:#fff;
border:1px solid #ddd;
border-radius:100px;
top:0;
left:0px;
position:absolute;
-webkit-transition:all .2s ease;
transition:all .2s ease;
}
.radio-label:hover:before{
border:1px solid #4198d3;
}
input[type="radio"]:checked + .radio-label:after {
content:"";
width:11px;
height:11px;
display:block;
position:absolute;
top:3.3px;
left:3.3px;
background-color:#4498ff;
background-repeat:no-repeat;
background-position:center;
background-size:11px;
border-radius:100px;
}
form{
margin:50px 0;
}
<form>
<input id="ben" class="radio-check" type="radio" name="odeme" required>
<label for="ben" class="radio-label">Option Name</label>
<input type="submit" class="test">
</form>
Click submit button to see the problem. Top is custom, bottom is default.
<form>
<input id="ben" type="radio" name="odeme" required>
<label for="ben" >Option Name</label>
<input type="submit">
</form>
I'm trying to set a width limit on a input label and at the same time align a styled check to the right.
The below image shows how it currently looks and how I'd like it to look:
This is the HTML I'm using:
<a href='#' class='tooltip' title='tooltip text.'><img src='images/tooltip.png'></a> <b>This is my Text Label:</b></div>
<label class="switch"><input type="checkbox" name='check' id='check' title='checkbox' value="1"><div class="slider"></div></label>
<br/><input type="text" id="textinput" name="textinput" size="40" maxlength="40" autocomplete="off" placeholder="enter text here" value="" tabindex='1' disabled/></div><br/>
I've created a fiddle showing it here:
https://jsfiddle.net/bywgqnrg/1/
Can anyone advise the best way to do this ?
Thanks
Here's a possible solution, I added a fieldwrap to wrap the whole content and sets a fixed width and floated the switch to right check the code below:
.switch { position:relative; display:inline-block; width:53px; height:19px }
.switch input { display:none }
.slider { position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background-color:#ccc; -webkit-transition:.4s; transition:.4s }
.slider:before { position:absolute; content:""; height:11px; width:19px; left:4px; bottom:4px; background-color:#fff; -webkit-transition:.4s; transition:.4s }
input:checked+.slider { background-color:#008c00 } input:focus+.slider { box-shadow:0 0 1px #2196F3 }
input:checked+.slider:before { -webkit-transform:translateX(26px); -ms-transform:translateX(26px); transform:translateX(26px) }
input, select, textarea {border: 1px solid #A0A0A0; background: #FFF; padding: 3px 4px; color: #222; margin: 2px 5px 2px 0px; }
input:focus, select:focus, textarea:focus { outline: none;}
.fieldwrap { width : 320px; overflow : hidden; }
.fieldwrap .switch {float : right;}
<div class="fieldwrap">
<a href='#' class='tooltip' title='tooltip text.'><img src='images/tooltip.png'></a> <b>This is my Text Label:</b>
<label class="switch"><input type="checkbox" name='check' id='check' title='checkbox' value="1"><div class="slider"></div></label>
<div><input type="text" id="textinput" name="textinput" size="40" maxlength="40" autocomplete="off" placeholder="enter text here" value="" tabindex='1' disabled/></div>
</div>
Basically I created a couple radio buttons, then hid the actual buttons, and made the labels the buttons. For some reason they won't display inline and I can't quite seem to figure out why. Does anyone know what I'm doing wrong?
.ReviewBox {
width:64%;
height:600px;
position:relative;
left:18%;
background-color:#4795d7;
margin-bottom:10px;
box-shadow:0px 2px 4px black;
border-radius:4px;
}
.ReviewBox input {
visibility:hidden;
width:0;
display:inline;
}
.ReviewBox label:hover {
color:#00aedb;
}
.ReviewBox input:checked + label {
color:#0900ff;
}
.ReviewBox p {
position:absolute;
left:12%;
color:white;
}
.ReviewBox label {
position:relative;
left:45%;
color:white;
display:inline;
}
.ReviewHeader {
position:relative;
left:7%;
top:32px;
font-size:26px;
text-shadow:0px 1px 1px black;
font-family:Lobster;
color:white;
}
.Server {
top:75px;
font-size:15px;
}
.Names label{
top:27px;
font-size:15px;
}
<div class="ReviewBox">
<h2 class="ReviewHeader">Let Us Know How We Did</h2>
<div>
<p class="Server">Server</p>
<div class="Names">
<input type="radio" name="Names" value="Juan" id="Juan">
<label for="Juan">Juan</label>
</div>
<div class="Names">
<input type="radio" name="Names" value="Sebastian" id="Sebastian">
<label for="Sebastian">Sebastian</label>
</div>
</div>
Heres a JSFiddle of what I have: http://jsfiddle.net/u6u53916/1/
<div class="names">
<input type="radio" name="Names" value="Juan" id="Juan"/>
<label for="Juan">Juan</label>
<input type="radio" name="Names" value="Pablo" id="Pablo"/>
<label for="Pablo">Pablo</label>
</div>
Just remove the middle <div class="names"> so that it is a single div enclosing the radio buttons.
just add display: inline; to your Names class. it's your code + what you're looking for:
http://jsfiddle.net/Igor_Ivancha/kywno6q0/
Every time I hover over the label of a checkbox it turns yellow:
Markup
<input type="checkbox" value="hello" id="hello" name="deletefiles[]"/>
<label for="hello">hello</label>
CSS
label:hover, label:active {
background:yellow;
}
When I hover over the related checkbox, I want the label to highlight. Is there a way to fire the same hover rule using CSS if I hover over the checkbox as well? Or will I have to use JavaScript for this...?
You can use a CSS sibling selector, like this:
label:hover, label:active, input:hover+label, input:active+label {
background:yellow;
}
Note that this won't work in IE6.
Just put the checkbox inside the label:
<label for="hello">
<input type="checkbox" value="hello" id="hello" name="deletefiles[]"/>
hello
</label>
Now when you hover over the checkbox, you'll also be hovering over the label, and your existing rules will suffice to highlight it.
The jQuery solution:
$(document).ready(function(){
$('#hello, label[for="hello"]').hover(function(){$(this).addClass('.hover');},
function(){$(this).removeClass('.hover');});
});
...
.hover
{
background-color: yellow;
}
And this DOES work in IE6.
/*CSS*/
/*-------------------------------------------------*/
input:not(:checked) + label:hover{
color: #d51e22;
cursor: pointer;
background-color: #bbb;
}
input:checked + label[for="tab1"],
input:checked + label[for="tab2"],
input:checked + label[for="tab3"],
input:checked + label[for="tab4"]{
color: #d51e22;
text-shadow: 0 0.04em 0.04em rgba(0,0,0,0.35);
background-color: #000;
}
label[for="tab1"],[for="tab2"],[for="tab3"],[for="tab4"] {
width:24%;
display: inline-block;
margin: 0 0 -1px;
padding: 25px 25px;
font-weight: 600;
font-size:24px;
text-align: center;
border-radius:15px;
background-color: #d51e22;
color: #fff;
/*border: 1px solid transparent;*/
}
/*HTML*/
/*-------------------------------------------------*/
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1">Text here</label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2">Text here</label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3">Text here</label>
<input id="tab4" type="radio" name="tabs">
<label for="tab4">Text here</label>