I have looked at the different questions regarding this issue, but couldn't find anything that works due to limitations in my markup.
My markup looks like so (unfortunately as this is generated by some backend, I am unable to change the markup).
<ul>
<li>
<input type="checkbox" value="1" name="test[]" id="myid1">
<label for="myid1">label1</label>
</li>
<li>
<input type="checkbox" value="2" name="test[]" id="myid2">
<label for="myid2">label1</label>
</li>
</ul>
I need the checkbox to be on the right and centered vertically in the <li>
Currently, this is styled as:
li input{
display: inline-block;
float: right;
margin-right: 10px;
}
I have tried using various values for vertical-align, but that doesn't seem to help. Also, in some cases the label can be very long and span multiple lines. The checkbox would still need to be able to vertically center itself when the height of the li is arbitrary.
How can I go about achieving this?
Vertical alignment only works on inline elements. If you float it, then I don't think it is treated as part of that stream of inline elements any more.
Make the label an inline-block, and use vertical alignment on both the label and the input to align their middles. Then, assuming it is okay to have a specific width on the labels and checkboxes, use relative positioning instead of floating to swap them (jsFiddle demo):
input {
width: 20px;
position: relative;
left: 200px;
vertical-align: middle;
}
label {
width: 200px;
position: relative;
left: -20px;
display: inline-block;
vertical-align: middle;
}
Its not a perfect solution, but a good workaround.
You need to assign your elements to behave as table with display: table-cell
Solution: Demo
HTML:
<ul>
<li>
<div><input type="checkbox" value="1" name="test[]" id="myid1"></div>
<div><label for="myid1">label1</label></div>
</li>
<li>
<div><input type="checkbox" value="2" name="test[]" id="myid2"></div>
<div><label for="myid2">label2</label></div>
</li>
</ul>
CSS:
li div { display: table-cell; vertical-align: middle; }
The most effective solution that I found is to define the parent element with display:flex and align-items:center
LIVE DEMO
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.myclass{
display:flex;
align-items:center;
background-color:grey;
color:#fff;
height:50px;
}
</style>
</head>
<body>
<div class="myclass">
<input type="checkbox">
<label>do you love Ananas?
</label>
</div>
</body>
</html>
OUTPUT:
<div>
<input type="checkbox">
<img src="/image.png" />
</div>
input[type="checkbox"]
{
margin-top: -50%;
vertical-align: middle;
}
This works reliably for me. Cell borders and height added for effect and clarity:
<table>
<tr>
<td style="text-align:right; border: thin solid; height:50px">Some label:</td>
<td style="border: thin solid;">
<input type="checkbox" checked="checked" id="chk1" style="cursor:pointer; "><label for="chk1" style="margin-top:auto; margin-left:5px; margin-bottom:auto; cursor:pointer;">Check Me</label>
</td>
</tr>
</table>
Add CSS:
li {
display: table-row;
}
li div {
display: table-cell;
vertical-align: middle;
}
.check{
width:20px;
}
ul{
list-style: none;
}
<ul>
<li>
<div><label for="myid1">Subject1</label></div>
<div class="check"><input type="checkbox" value="1"name="subject" class="subject-list" id="myid1"></div>
</li>
<li>
<div><label for="myid2">Subject2</label></div>
<div class="check" ><input type="checkbox" value="2" class="subject-list" name="subjct" id="myid2"></div>
</li>
</ul>
make input to block and float, Adjust margin top value.
HTML:
<div class="label">
<input type="checkbox" name="test" /> luke..
</div>
CSS:
/*
change margin-top, if your line-height is different.
*/
input[type=checkbox]{
height:18px;
width:18px;
padding:0;
margin-top:5px;
display:block;
float:left;
}
.label{
border:1px solid red;
}
Demo
Related
I am using a checkbox as a way to modify the other element's style. Is it possible for a checkbox to affect other classes/elements of the website.
I have a sample html code below, instead of changing label element, is it possible to change the styling of the first div instead.
ul li {
display: inline-block;
}
ul li input[type="checkbox"]:checked+label {
border: 2px solid gray;
background-color: gray;
color: #fff;
transition: all .2s;
}
ul li {
padding: 20px;
margin: 20px;
}
ul li input[type="checkbox"] {
display: absolute;
}
ul li input[type="checkbox"] {
position: absolute;
opacity: 0;
}
ul li label {
padding: 20px;
cursor: pointer;
}
<div class="modify-box">
BOX TO CHANGED
</div>
<ul>
<li>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> Bike</label><br>
</li>
<li>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> Car</label><br>
</li>
<li>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> Boat</label><br>
</li>
</ul>
There is a way to make this happen, but it's to use exactly the same "trick" with which you style the <label> elements, specifically by moving the <input> elements ahead of the element you wish to style.
With that in mind, if the <input> elements are preceding siblings of the <div>, then checking, and unchecking, the <input> can have an effect on the <div>, and also the original <label> elements as well.
As a crude example:
input[type="checkbox"][name^="vehicle"] {
display: absolute;
position: absolute;
opacity: 0;
}
/* styles the <div> based on the checked/unchecked state
of the <input> (this example assumes that the same
highlight colour should be used regardless of which
<input> is checked: */
input[type="checkbox"][name^="vehicle"]:checked ~ div {
background-color: #ccc;
}
/* this is where it becomes obvious that JavaScript (or,
ideally, a CSS selector that can refer to an attribute-
variable) makes more sense; though with a CSS
pre-processor this can be written effectively enough.
Here when the #vehicle1 element is checked the <label>
descendents with a "for" attribute equal to "vehicle1" of
later-sibling <ul> elements are selected and styled: */
#vehicle1:checked~ul label[for=vehicle1] {
background-color: gray;
}
/* as above, for the "vehicle2" id and for attributes: */
#vehicle2:checked~ul label[for=vehicle2] {
background-color: gray;
}
#vehicle3:checked~ul label[for=vehicle3] {
background-color: gray;
}
ul li {
display: inline-block;
padding: 20px;
margin: 20px;
}
ul li label {
padding: 20px;
cursor: pointer;
}
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<div class="modify-box">
BOX TO CHANGED
</div>
<ul>
<li>
<label for="vehicle1"> Bike</label><br>
</li>
<li>
<label for="vehicle2"> Car</label><br>
</li>
<li>
<label for="vehicle3"> Boat</label><br>
</li>
</ul>
With only CSS this won't be possible. You are restricted by the current selectors and there are no parent selectors in CSS. You can use a bit of JS to target the element you want.
What would you like to happen in the box surrounding the checkboxes? Maybe there would be another solution with a :before or :after on the label?
I think you need JavaScript for that. You could listen for the change event and style if no checkbox is checked.
First you need to select the containing list element and attach an event listener to it:
document.querySelector('ul').addEventListener('change', function(e) {...});
In the handler function of the listener you have to check if there is a checked checkbox and depending on that check style your .modify.box (or toggle a class, for example .checked):
if (document.querySelector('input:checked')) {
modify_box.classList.add('checked');
}
else {
modify_box.classList.remove('checked');
}
If you decide to toggle a class you need to add that class to your CSS-definition. For example:
ul li input[type="checkbox"]:checked+label,
.checked {...}
Working example:
const modify_box = document.querySelector('.modify-box');
document.querySelector('ul').addEventListener('change', function(e) {
if (document.querySelector('input:checked')) {
modify_box.classList.add('checked');
}
else {
modify_box.classList.remove('checked');
}
});
ul li {
display: inline-block;
}
ul li input[type="checkbox"]:checked+label,
.checked {
border: 2px solid gray;
background-color: gray;
color: #fff;
transition: all .2s;
}
ul li {
padding: 20px;
margin: 20px;
}
ul li input[type="checkbox"] {
display: absolute;
}
ul li input[type="checkbox"] {
position: absolute;
opacity: 0;
}
ul li label {
padding: 20px;
cursor: pointer;
}
<div class="modify-box">
BOX TO CHANGED
</div>
<ul>
<li>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> Bike</label><br>
</li>
<li>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> Car</label><br>
</li>
<li>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> Boat</label><br>
</li>
</ul>
This question already has answers here:
Can I have an onclick effect in CSS?
(14 answers)
Closed 3 years ago.
I tried many ways to change the color of the border of my image when the checkbox is checked and I didn't find a solution. I start wondering if it's possible.
.thumbs {
list-style:none;
margin:0;
padding:0.3em 0;
text-align:center;
color:#fff;
}
.thumbs li {
position:relative;
display:inline-block;
margin:0.2em;
border:0.30em solid #000000 ;
border-radius:0.3em;
}
.thumbs li:hover { border-color: #59b359; }
input[type=checkbox]:checked + .thumbs li { border-color: #ff0000; }
<form id="formdelete">
<ul class="thumbs">
<li class="img">
<label for="SNAP_CH01.jpg">
<img src="SNAP_CH01.jpg" title="CH1">
<input type="checkbox" name="todelete[]" value="SNAP_CH01" id="SNAP_CH01.jpg">
</li>
<li class="img">
<label for="SNAP_CH02.jpg">
<img src="SNAP_CH02.jpg" title="CH2">
</label>
<input type="checkbox" name="todelete[]" value="SNAP_CH02" id="SNAP_CH02.jpg">
</li>
<li class="img">
<label for="SNAP_CH03.jpg">
<img src="SNAP_CH03.jpg" title="CH3">
</label>
<input type="checkbox" name="todelete[]" value="SNAP_CH03" id="SNAP_CH03.jpg">
</li>
</form>
The border should be red when the checkbox is checked
EDIT :
I find a solution using the link :
I have to change the order of the checkbox but it's work fine :
<ul class="thumbs">
<li class="img">
<input type="checkbox" name="todelete[]" value="SNAP_CH01" id="SNAP_CH01.jpg">
<label for="SNAP_CH01.jpg">
<img src="SNAP_CH01.jpg" title="CH1">
</label>
</li>
label > img {
display: block;
border: 3px solid #000000 ;
}
input[type=checkbox]:checked + label > img { border: 3px #FF0000 solid ;}
So, the adjacent sibling selector + https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator will target the element immediately AFTER the element being referenced.
In your code, input[type=checkbox]:checked + .thumbs li it is looking for a class for thumbs immediately after the checkbox. In this case, .thumbs is the name of the (grand) parent UL item.
The most important letter in CSS is the C -- Cascading. The styles move down the DOM tree, you will need creative ways to affect something above.
I have this section of html:
<ul id="checkout">
<li>
<p>$1.99 Basket</p>
</li>
<li>
<form>
QTY: <input type="number" name="quantity" min="0">
</form>
</li>
</ul>
And it displays like so:
For some reason the "$1.99 Basket" is not inline with the quantity form.
My CSS for the section is like so:
#checkout {
display: inline;
}
I simply want the Price and Quantity field on the same level.
Try the below code to pull elements left or right.
#checkout li:nth-child(1) {
display:inline-block;
float:left;
}
#checkout li:nth-child(2) {
display:inline-block;
float:right;
}
After this code don't forget the clear with below code.
#checkout {
clear: both;
}
jsfiddle
Get rid of your <p> tags and add your lis to your css
<style>
#checkout li {
display: inline;
}
#checkout form {
display: inline;
}
</style>
<ul id="checkout">
<li>
$1.99 Basket
</li>
<li>
<form>
QTY: <input type="number" name="quantity" min="0">
</form>
</li>
</ul>
Assuming you want them horizontally aligned:
You are setting the <ul> to display: inline;, but you need to set your <li> elements to display: inline-block; so that they will appear on the same line. Just targeting the <ul> will not affect the children.
(The <li> element's default display property value is list-item.)
#checkout li {
display: inline-block;
}
I have got a menu list:
<ul>
<li class="marked">First item</li>
<li>Second much longer than first item</li>
</ul>
I would like to have an image marker on top of item.marked which width will be 100% of text width. The image must stretch so it will be completely visible. Height is constant.
Can this be done with CSS and IE compatibility?
<style type="text/css">
.selected {
background:url("example.png") no-repeat 0 100%;
}
</style>
Solutions for changing background of list item (can be adapted to change an image):
1. CSS-only, persistent, works for current versions of browsers (doesn't work for IE8 and older) - DEMO.
HTML:
<ul>
<li>
<input type="radio" name="s" id="o1" checked>
<label for="o1">First item</label>
</li>
<li>
<input type="radio" name="s" id="o2">
<label for="o2">Second much longer than first item</label>
</li>
</ul>
Relevant CSS:
ul input[type=radio] {
display: none;
}
input[type=radio]:checked + label {
background: lightblue;
}
If you want to have an image (with img tag) above the selected items, then you can adapt it like in this demo.
HTML:
<ul>
<li>
<input type="radio" name="s" id="o1" checked>
<label for="o1">First item
<img src="http://upload.wikimedia.org/wikipedia/commons/5/5b/Supernumerary_rainbow_03_contrast.jpg">
</label>
</li>
<li>
<input type="radio" name="s" id="o2">
<label for="o2">Second much longer than first item
<img src="http://upload.wikimedia.org/wikipedia/commons/5/5b/Supernumerary_rainbow_03_contrast.jpg">
</label>
</li>
</ul>
And add the following CSS:
label img {
top: 0;
width: 100%;
height: 100%;
display: none;
position: absolute;
}
input[type=radio]:checked + label img {
display: block;
}
If you don't want to do it with an img tag, then you can use a background-image on a pseudo-element and set the background-size to 100% 100%, like in this demo. The HTML is the same as in the first demo and you need to also have this in the CSS:
label {
position: relative;
}
input[type=radio]:checked + label:after {
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
background: url(http://upload.wikimedia.org/wikipedia/commons/5/5b/Supernumerary_rainbow_03_contrast.jpg);
background-size: 100% 100%;
content: '';
}
2. CSS-only, not persistent (list item does not stay selected when you click somewhere else on the page), works for IE8 (and also IE7, but you have to hover off the text to see the change) - DEMO.
HTML:
<ul>
<li>First item</li>
<li>Second much longer than first item</li>
</ul>
Relevant CSS:
a:active, a:focus {
outline: none;
background: lightblue;
}
How do I get two buttons to appear one above the other in a span? The buttons should both be the same size also. I've tried vertical-align:middle and display:inline-block but with no success. The end goal is to have one list on the left, two buttons in the middle, and one list on the right. The buttons in the middle will be "Add" and "Remove" and move items between the two lists. I found this link but it was updated in 2004 and seems like a very poor way to do it. I've been searching for awhile and I must not be looking for the right things, so some guidance would be appreciated.
Here two buttons are aligned one above the other.
First between two lists:
http://jsfiddle.net/xGXER/
<!DOCTYPE html>
<html>
<head>
<title>Buttons in between</title>
</head>
<body>
<ul style="background: #afa; display: inline-block; width: 100px; vertical-align: top;">
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
</ul>
<span style="display: inline-block; width: 70px; background: #6af; vertical-align: top;">
<button style="width: 70px;">Add</button>
<button style="width: 70px;">Remove</button>
</span>
<ul style="background: #afa; display: inline-block; width: 100px; text-align: right; vertical-align: top;">
<li>Ein</li>
<li>Zwei</li>
<li>Drei</li>
<li>Vier</li>
</ul>
</body>
</html>
...and then between two spans:
http://jsfiddle.net/JtXj2/
<!DOCTYPE html>
<html>
<head>
<title>Buttons in between spans</title>
</head>
<body>
<span style="background: #f06; vertical-align: top;">Foo bar has left the building</span>
<span style="display: inline-block; width: 70px; height: 52px; background: #06f;">
<button style="width: 70px;">Add</button>
<button style="width: 70px;">Remove</button>
</span>
<span style="background: #0f0; vertical-align: top;">Bar hopping is what we do at Friday nights</span>
</body>
</html>
span { display:block; }
span button { float: left; width:100px; height:100px; margin:10px; clear:left; }
span .clearingelement { clear:left; }
The span element is an inline display element. Why not use a div element which is a block element? I don't see the point of styling a span to act like a div
Have you has only two buttons inside a <SPAN>? I guess the <SPAN> are inside a <P>, so I hope this would be what you need:
http://jsfiddle.net/Gpt6a/
This seems too simple, but - if the question actually is "How do I get two buttons to appear one above the other in a span?", then... I think this is your answer.
<span>
BUTTON 1<br />
BUTTON 2
</span>
EDIT:
Set the width of the list and float it:
<ul style="width:100px; float:left;">
<li>list item 1</li>
<li>list item 2</li>
</ul>
<span>button1<br />button2</span>