---------------------------------HTML code----------------------------------------
<label class="round">
<input type="checkbox" id="round-checkbox" class="check-btn">
<span></span>
</label>
<label for="round-checkbox" id="task-text" >Hello Smple TEXT</label>
-----------------------------------------CSS code-----------------------------------------------
.round input:checked+label{
text-decoration: line-through;
}
I tried the above approach but it is not working...
First of all, I think you should read what the label tag is used for (why do you have 2 labels for the same field?).
Then, with a "cleaner" HTML, it becomes easier:
<label>
<input type="checkbox" name="box" class="box">
<span class="label-text">label text</span>
</label>
.box {
display: none;
}
.box:checked ~ .label-text {
text-decoration: line-through;
}
Now you got the idea, you can adapt to "custom" checkbox:
<label>
<input type="checkbox" name="box" class="box">
<span class="custom-box"></span>
<span class="label-text">label text</span>
</label>
.box {
display: none;
}
.custom-box {
display: inline-block;
width: 1em;
height: 1em;
background: green;
}
.box:checked ~ .custom-box {
background: red;
}
.box:checked ~ .label-text {
text-decoration: line-through;
}
Related
Everybody knows the trick with toggling by click between 2 styles of <label> via <input type="checkbox">.
input {
display: none;
}
input:checked+label {
background: green;
}
label {
background: yellow;
cursor: pointer;
display: block;
height: 100px;
width: 100px;
}
<input type="checkbox" id="toggle">
<label for="toggle"></label>
But what if you want to toggle through a chain of styles?
For example: click 1 => CSS 1, click 2 => CSS 2, click 3 => CSS 3, click 4 => CSS 1... etc.
Is it possible with HTML + CSS only?
UPD: Yes, it is. My approach is below. But is it possible to make the solution simpler?
input, label {
display: none;
}
div {
height: 50px;
width: 50px;
}
#toggle1:checked~div {
background: red;
}
#toggle2:checked~div {
background: yellow;
}
#toggle3:checked~div {
background: blue;
}
#toggle1:checked~div [for=toggle2],
#toggle2:checked~div [for=toggle3],
#toggle3:checked~div [for=toggle1] {
cursor: pointer;
display: block;
height: 100%;
}
<input type="radio" name="toggle" id="toggle1" checked>
<input type="radio" name="toggle" id="toggle2">
<input type="radio" name="toggle" id="toggle3">
<div>
<label for="toggle1"></label>
<label for="toggle2"></label>
<label for="toggle3"></label>
</div>
By default only one selected or the default option is displayed in the select box however I want that all the select option to be displayed on the same line and among them the selected option must be highlighted.
Following is my code
.selecttodiv{
display: inline-block;
height: 3em;
-webkit-appearance: none;
-moz-appearance: none;
}
.selecttodiv option{
display: inline-block;
width: 2.5em;
height: 2.5em;
}
<select class="selecttodiv">
<option>I</option>
<option>II</option>
<option>III</option>
<option>IV</option>
<option>V</option>
<option>VI</option>
</select>
following is the link to jsfiddle: https://jsfiddle.net/6yg4yhyy/
I am able to display all option on the single line but not when selected.
Thanks for any help.
You can try using size attribute on select and floating option.
On Chrome and FF it was displayed properly. IE (11) doesn't work.
JSFiddle
Maybe it's better to use some select plugin where you can style it as you want..
Don't style default form elements. It will cause more issues than you think. Better use some extension that provides stylable html wrapper.
E.g. select2, chosen
$(document).ready(function() {
$('.selecttodiv').select2({
width: '190px'
});
})
.select2-results li {
display: inline-block !important;
width: 30px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.min.js"></script>
<select class="selecttodiv" multiple="multiple">
<option>I</option>
<option>II</option>
<option>III</option>
<option>IV</option>
<option>V</option>
<option>VI</option>
</select>
Update
Also it may be checkboxes:
.check {
display: inline-block;
}
span {
width: 20px;
height: 20px;
display: block;
color: black;
font-weight: bold;
cursor: pointer;
text-align: center;
}
input {
display: none;
}
input:checked + span {
background-color: blue;
color: white;
}
<label class="check">
<input type="checkbox" />
<span>I</span>
</label>
<label class="check">
<input type="checkbox" />
<span>II</span>
</label>
<label class="check">
<input type="checkbox" />
<span>III</span>
</label>
<label class="check">
<input type="checkbox" />
<span>IV</span>
</label>
<label class="check">
<input type="checkbox" />
<span>V</span>
</label>
<label class="check">
<input type="checkbox" />
<span>VI</span>
</label>
I wanted to use image instead of regular radio inputs.
I made it this way:
input[type="radio"]{
content:url('/images/new-home-page/Checkbox.png');
height:3vh;
width:3vh;
}
input[type="radio"]:checked{
content:url('/images/new-home-page/checkedCheckbox.png');
}
Unfortunately, they have circles around them. I have tried to use border:none or text-decoration:none but it doesnt help. Could someone help me with this please?
They look like this now:
I would request you to use the appearance property of CSS, which is responsible for the components like this. So setting the appearance: none will make a kind of display: none to the component's appearance, which is what is needed for you. You are good to use this bit of CSS to make the component not display, while keeping the element in the view:
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
Snippet
input {
content: url('http://i.stack.imgur.com/M3EkO.png');
height: 16px;
width: 16px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
input:checked {
content: url('http://i.stack.imgur.com/Ialva.png');
}
Checkbox:
<input type="checkbox" name="" id="" /> <br />
Radios:
<input type="radio" name="Hi" id="" />
<input type="radio" name="Hi" id="" />
Output: http://output.jsbin.com/digebimolu/1
You must hide radio buttons and add more elements like <span> and <label>
Here is how it should work: http://jsfiddle.net/etz9Lfat/
Here is a another interesting solution, using pseudo element, where you also get rid of the surrounding focus outline.
The really good with this is it works on IE 8-11 as well, which unfortunately the better solution using appearence don't.
input[type="radio"] {
display:none;
}
input[type="radio"] + label {
position: relative;
padding-left: 54px;
cursor:pointer;
font-size: 26px;
}
input[type="radio"] + label:before {
content: "";
position: absolute;
left: 0;
top: 50%;
margin-top: -22px;
width:46px;
height:46px;
background: url('http://i.stack.imgur.com/M3EkO.png');
background-size: contain;
}
input[type="radio"]:checked + label:before {
background: url('http://i.stack.imgur.com/Ialva.png');
}
<input id="cb" value="1" name="cb" type="radio">
<label for="cb">Text 1</label>
<input id="cb2" value="2" name="cb" type="radio">
<label for="cb2">Text 2</label>
i would suggest a whole other solution.
input[type="checkbox"], input[type="radio"] {
display:none;
}
input[type="checkbox"] + label{
padding-left:35px;
}
input[type="checkbox"] + label span {
display:inline-block;
width:52px; /* width of the checkbox */
height:53px; /* height of the checkbox */
margin:-1px 10px 0 -35px;
vertical-align:middle;
background:url('http://i.stack.imgur.com/M3EkO.png') left top no-repeat;
cursor:pointer;
}
/* replaces the image if checked.*/
input[type="checkbox"]:checked + label span {
background:url('http://i.stack.imgur.com/Ialva.png') left top no-repeat;
}
<input id="cb" value="" type="checkbox">
<label for="cb"><span></span> Text</label>
With this Solution you wont have any Problems in all browsers.
It will hide the checkbox itself, but it still works because you can click the label, which is connected to the checkbox.
In this label there is a span with your background image and the sizes of it. So it still looks like a checkbox and your hidden checkbox will be "checked" or "unchecked"
Add this in your css file:
input[type=radio]{
display:none;
}
Here is a simple work around to get customized radio buttons
https://jsfiddle.net/sudheer219/fj8heLcp/
Code:
[HTML]
<ul>
<li>
<input type='radio' value='1' name='radio' id='radio1'/>
<label for='radio1'><span></span>Value 1</label>
</li>
<li>
<input type='radio' value='2' name='radio' id='radio2'/>
<label for='radio2'><span></span>Value 2</label>
</li>
<li>
<input type='radio' value='3' name='radio' id='radio3'/>
<label for='radio3'><span></span>Value 3</label>
</li>
</ul>
[CSS]
ul {
list-style: none;
}
li {
display: inline-block;
margin-right: 15px;
}
input {
visibility: hidden;
}
label {
cursor: pointer;
}
input:checked+label span {
background: red;
}
span {
display: inline-block;
width: 18px;
height: 18px;
border-radius: 50%;
border: 2px inset #444;
position: relative;
top: 3px;
margin-right: 4px;
}
I found this example (the "checked" version) and it works:
http://jsfiddle.net/2cTwA/
But I want to wrap the input and labels inside a container element (like nav), and if I do that the tabs stop working :(
Is there any solution for this?
found solution: http://jsfiddle.net/2cTwA/7/
With a slight HTML and CSS modification - DEMO
CSS
input { display: none; }
nav { overflow: hidden }
label { float: left; display: inline-block; padding: 5px 10px; }
label a { color: #d33; text-decoration: underline; cursor: pointer; }
.tab { display: none; border: 1px solid #333; padding: 10px; }
a[name="tab1"] + .tab { display: block }
:target + .tab { display: block }
:target ~ a[name="tab1"] + .tab { display: none }
HTML
<section class="tab-area tabs-checked">
<nav>
<input checked type="radio" name="tab" id="tab-A" />
<input type="radio" name="tab" id="tab-B" />
<input type="radio" name="tab" id="tab-C" />
<label class="tab-link" for="tab-A">Tab 1</label>
<label class="tab-link" for="tab-B">Tab 2</label>
<label class="tab-link" for="tab-C">Tab 3</label>
</nav>
<a name="tab3"></a>
<article class="tab">
<h3>Tab 3</h3>
</article>
<a name="tab2"></a>
<article class="tab">
<h3>Tab 2</h3>
</article>
<a name="tab1"></a>
<article class="tab">
<h3>Tab 1.</h3>
</article>
</section>
You're using the sibling selector (~), and by using a containing element such as nav, you are removing the inputs and labels from being siblings of the articles.
You simply need to rewrite your css where you use the tilde.
here is the sass example for 12(max) tabs using CSS only
.tabs {
input[type=radio] {
display: none;
#for $i from 1 through 12 {
&:nth-of-type(#{$i}):checked ~ .content .tab:nth-child(#{$i}) {
display: block;
}
}
}
label {
cursor: pointer;
display: inline-block;
}
.tab {
display: none;
}
}
and here is the html markup
<div class="tabs">
<input name="controls" type="radio" id="controls-tab" checked="true"/>
<label for="controls-tab">controls</label>
<input name="controls" type="radio" id="panels-tab"/>
<label for="panels-tab">panels</label>
<input name="controls" type="radio" id="readme-tab"/>
<label for="readme-tab">readme</label>
<div class="content">
<div class="tab">
</div>
<div class="tab">
</div>
<div class="tab">
</div>
</div>
</div>
no need to relatively position tab divs inside content div. no need to set content height.
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>