I'm trying to make this CSS be flexible and use in an HTML table and be able to only change the element in focus without using JavaScript -- but because of the selectors, it is only changing the first element. I'm not the best CSS developer.
I understand that using the "for=" and repeating the ids of the checkboxes we are rendering invalid HTML, but I was wondering if there was a way around it. I tried to give each parent span a unique id and generate separate classes for them, as well as the labels. but that seemed like it could be an unnecessary amount of work.
Previously I had no use to include these in a table, except now I do.
Is there an easy/flexible approach to making this possible?
See my example here.
CSS
.checkbox-on-off {
position: relative;
display: inline-block;
width: 35px;
padding-right: 2px;
overflow: hidden;
vertical-align: middle;
margin-top: 10px;
}
.checkbox-on-off input[type=checkbox] {
position: absolute;
opacity: 0;
}
.checkbox-on-off input[type=checkbox]:checked+label {
background-color: lightblue;
}
.checkbox-on-off label {
display: inline-block;
border: 1px solid transparent;
height: 15px;
width: 100%;
background: #b8b8b8;
cursor: pointer;
border-radius: 20px;
}
.checkbox-on-off input[type=checkbox]:checked+label .checked {
display: inline-block;
margin-top: 3px;
margin-left: 6px;
background: no-repeat url('img/www-hitchhiker-vflAhaHWR.png') -421px -78px;
background-size: auto;
width: 10px;
height: 10px;
}
.checkbox-on-off label .checked {
display: none;
}
.checkbox-on-off input[type=checkbox]:checked+label .unchecked {
display: none;
}
.checkbox-on-off label .unchecked {
display: inline-block;
float: right;
padding-right: 3px;
}
.checkbox-on-off input[type=checkbox]:checked+label .toggle {
float: right;
}
.checkbox-on-off label .toggle {
float: left;
background: #fbfbfb;
height: 15px;
width: 13px;
border-radius: 20px;
}
HTML
<span class="checkbox-on-off ">
<input id="autoplay-checkbox" class="" type="checkbox" checked="">
<label for="autoplay-checkbox" id="autoplay-checkbox-label">
<span class="checked"> </span>
<span class="unchecked"></span>
<span class="toggle"> </span>
</label>
</span>
<span class="checkbox-on-off ">
<input id="autoplay-checkbox" class="" type="checkbox" checked="">
<label for="autoplay-checkbox" id="autoplay-checkbox-label">
<span class="checked"> </span>
<span class="unchecked"></span>
<span class="toggle"> </span>
</label>
</span>
<span class="checkbox-on-off ">
<input id="autoplay-checkbox" class="" type="checkbox" checked="">
<label for="autoplay-checkbox" id="autoplay-checkbox-label">
<span class="checked"> </span>
<span class="unchecked"></span>
<span class="toggle"> </span>
</label>
</span>
<span class="checkbox-on-off ">
<input id="autoplay-checkbox" class="" type="checkbox" checked="">
<label for="autoplay-checkbox" id="autoplay-checkbox-label">
<span class="checked"> </span>
<span class="unchecked"></span>
<span class="toggle"> </span>
</label>
</span>
<span class="checkbox-on-off ">
<input id="autoplay-checkbox" class="" type="checkbox" checked="">
<label for="autoplay-checkbox" id="autoplay-checkbox-label">
<span class="checked"> </span>
<span class="unchecked"></span>
<span class="toggle"> </span>
</label>
</span>
<span class="checkbox-on-off ">
<input id="autoplay-checkbox" class="" type="checkbox" checked="">
<label for="autoplay-checkbox" id="autoplay-checkbox-label">
<span class="checked"> </span>
<span class="unchecked"></span>
<span class="toggle"> </span>
</label>
</span>
Yes, the way around it is to have the inputs inside of the label element:
<label>
<input type="checkbox">
Some Checkbox 1
</label>
<label>
<input type="checkbox">
Some Checkbox 2
</label>
So clicking anywhere inside the label will now toggle the checkbox that is also nested inside that label. Now you don't need for for= attribute on the label.
Related
I need to get the menu item to remain highlighted when a user clicks on it, of each different page..? It must be CSS only.
CSS:
.topplinker span:hover, .index .shjem, .kontakt .skontakt, .byggdrifter .sbyggdrifter, .om .som {
background-color: #fffcd9;
border-radius: 0 10px 0 0;}
HTML:
<body class="index"><p class="topplinker">
<span class="shjem">Hjem</span>
<span class="skontakt">Kontakt</span>
<span class="sbyggdrifter">Byggdrifter</span>
<span class="som">Om</span>
</p>
So now the code depends on the body class to be unique for each page to work. But I wants it to be working without using the body class to highlight each menu item. Any suggestions..?
Best regards
use ul and li.
then use onclick function to make li active.
Try this one with CSS, If you click on the URL i just change color.
FYI, if pages loads while clicking those url means you have right based on Router URL only.
#toggle1:checked ~ .control-me,
#toggle2:checked ~ .control-me,
#toggle3:checked ~ .control-me,
#toggle4:checked ~ .control-me {
background: violet;
}
.menuitem {
visibility: hidden;
}
<body class="index">
<p class="topplinker">
<a href="javascript:;">
<label>
<input type="radio" name="menuitem" id="toggle1" class="menuitem" />
<span class="control-me shjem">Hjem</span>
</label>
</a>
<a href="javascript:;">
<label>
<input type="radio" name="menuitem" id="toggle2" class="menuitem" />
<span class="control-me skontakt">Kontakt</span>
</label>
</a>
<a href="javascript:;">
<label>
<input type="radio" name="menuitem" id="toggle3" class="menuitem" />
<span class="control-me sbyggdrifter">Byggdrifter</span>
</label>
</a>
<a href="javascript:;">
<label>
<input type="radio" name="menuitem" id="toggle4" class="menuitem" />
<span class="control-me som">Om</span>
</label>
</a>
</p>
</body>
CSS only solution:
.topplinker {
display: flex;
justify-content: space-evenly;
}
a {
text-decoration: none;
color: black;
}
a:active, a:hover {
color: green;
font-weight: bold;
}
/* EDIT */
a:visited {
color: blue;
}
<p class="topplinker">
<span class="shjem">Hjem</span>
<span class="skontakt">Kontakt</span>
<span class="sbyggdrifter">Byggdrifter</span>
<span class="som">Om</span>
</p>
See for more selectors: https://www.w3schools.com/css/css_link.asp
I know there are a lot answers here. I searched, tried to adapt but I failed all the time, that is why I am asking now.
I have the following problem. I want, both, labels and there inputs to be in the same line: Yes o No o (o symbolize the input).
Here my following code, remark that I changed the display property of label to inline block:
<div class="col-sm-3">
<label>Yes</label>
<input type="radio" name="yes/no" checked>
<label>No</label>
<input type="radio" name="yes/no" >
</div>
Sorry for answering, although there are a lot of similar questions and answers but adapting them did just not work...
If you want the inputs and the label to be 'bottom-aligned', try using vertical-align: text-bottom.
input[type='radio'] {
vertical-align: text-bottom;
margin-bottom: 1px;
}
div {
display: inline-block;
border: 1px solid black;
}
<div class="col-sm-3">
<label>Yes</label>
<input type="radio" name="yes/no" checked>
<label>No</label>
<input type="radio" name="yes/no" >
</div>
Apply vertical-align: middle with margin-top: -1px to each input[type='radio'] :
input[type='radio'] {
margin-top: -1px;
vertical-align: middle;
}
<div class="col-sm-3">
<label>Yes</label>
<input type="radio" name="yes/no" checked>
<label>No</label>
<input type="radio" name="yes/no" >
</div>
Perfect center : just line added crossing text and button in this second snippet to show perfect center
input[type='radio'] {
margin-top: -1px;
vertical-align: middle;
}
.col-sm-3 {
position: relative;
border: 1px solid;
}
.col-sm-3:after {
display: block;
content: '';
position: absolute;
width: 100%;
height: 1px;
background: black;
top: 50%;
}
<div class="col-sm-3">
<label>Yes</label>
<input type="radio" name="yes/no" checked>
<label>No</label>
<input type="radio" name="yes/no" >
</div>
You might want to consider wrapping your <input> in the <label> fields.
Example:
<div class="col-sm-3">
<label>Yes
<input type="radio" name="yes/no" checked>
</label>
<label>No
<input type="radio" name="yes/no" >
</label>
</div>
This implementation will increase accessibility and usability of your inputs and doesn't require any additional css.
Here is the problem, I have a single-page application where I lay out a form:
Due to my novice CSS skill, I have not been able to left align the help text (in blue). Here is my HTML code:
label {
width: 15%;
display: inline-block;
text-align: right;
padding-right: 10px;
}
span.short_help {
font-size: 70%;
color: cornflowerblue;
padding-left: 10px;
}
<form>
<div>
<label for="Authentication">Authentication:</label>
<input type="text" name="Authentication" id="-Authentication" />
<span class="short_help">Authentication type, I, II, or III</span>
</div>
<br/>
<div>
<label for="Branch">Branch:</label>
<input type="text" name="Branch" id="Branch" />
<span class="short_help">Which regional branch.</span>
</div>
<br/>
<div>
<label for="Persistent">Persistent:</label>
<input type="checkbox" name="Persistent" id="Persistent" />
<span class="short_help">Persistent connection</span>
</div>
<br/>
</form>
If I fixed up the input field to make the controls the same width so the help text align, then the check box will be centered:
Here is what I added to the CSS above:
input {
width: 15%;
}
How can I have both the controls and the blue text left aligned?
Instead of setting a width on all input fields, wrap a div arround it with a class. In my example .input
Now you can set the width of the field without affecting the input width.
* {
box-sizing: border-box;
}
form {
max-width: 600px;
}
label, .input, span {
display: inline-block;
vertical-align: middle;
margin-left: -4px;
}
label {
width: 20%;
}
.input {
width: 30%;
}
span {
color: cornflowerblue;
}
<form>
<div>
<label for="Authentication">Authentication:</label>
<div class="input">
<input type="text" name="Authentication" id="-Authentication" />
</div>
<span class="short_help">Authentication type, I, II, or III</span>
</div>
<br/>
<div>
<label for="Branch">Branch:</label>
<div class="input">
<input type="text" name="Branch" id="Branch" />
</div>
<span class="short_help">Which regional branch.</span>
</div>
<br/>
<div>
<label for="Persistent">Persistent:</label>
<div class="input">
<input type="checkbox" name="Persistent" id="Persistent" />
</div>
<span class="short_help">Persistent connection</span>
</div>
<br/>
</form>
Add an element to wrap around the inputs and make them the desired size:
<div>
<label for="Authentication">Authentication:</label>
<span class="spacer">
<input type="text" name="Authentication" id="-Authentication" />
</span>
<span class="short_help">Authentication type, I, II, or III</span>
</div>
<br/>
<div>
<label for="Branch">Branch:</label>
<span class="spacer">
<input type="text" name="Branch" id="Branch" />
</span>
<span class="short_help">Which regional branch.</span>
</div>
<br/>
<div>
<label for="Persistent">Persistent:</label>
<span class="spacer">
<input type="checkbox" name="Persistent" id="Persistent" />
</span>
<span class="short_help">Persistent connection</span>
</div>
And add CSS to format it:
span.spacer {
display: inline-block;
width: 15%;
}
I didn't quite get it, do you only want to align the checkbox or the blue text
To align the checkbox to the left, change
input {
width: 15%;
}
to
input[type="text"] {
width: 15%;
}
the input driver you can align your text to the left so
input
{
text-align: left;
width: 15%;
}
but the tag span can not be proque is an online element for more doubt read this site that talks about the span tag:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span
You can also contain the span in a div and somehow achieve alignment
I am trying to display fa-icon before my input.
My html code is as follows:
<table width="788" border="0">
<tr> <td> <input type="hidden" name="c_id" id="c_id" value="<?php echo $id; ?>"> </td> </tr>
<tr>
<td width="150"><p>
<label for="firstname">Customer First Name</label>
</p>
<p>
<label class="input">
<i class="fa fa-user" aria-hidden="true"></i>
<input class="myinput" type="text" name="firstname" id="fn" placeholder="First Name" value="<?php echo $firstname1; ?>" >
</label>
</p></td>
<td width="243"><p>
<label for="middlename">Customer Middle Name</label>
</p>
<p>
<label class="input">
<i class="fa fa-user" aria-hidden="true"></i>
<input class="myinput" type="text" name="middlename" id="middlename" value="<?php echo $m_name2; ?>" placeholder="Middle Name"> </label>
</p></td>
<td width="250"><p>
<label for="lastname">Customer Last Name</label>
</p>
<p>
<label class="input">
<i class="fa fa-user" aria-hidden="true"></i>
<input class="myinput" type="text" name="lastname" id="lastname" placeholder="Last Name" value="<?php echo $lastname3; ?> " >
</label>
</p></td></tr>
</table>
CSS is as follows:
i {
color: #c0c2c7;
margin-right: 10px;
margin-top: 4px;
padding: 2px 8px;
float:left;
}
.myinput
{
width:100%;
float:left;
}
input
{
background-color: #3CBC8D;
color: white;
display: inline-block;
padding: 5px 10px;
float:left;
width:90%;
}
The fa icon appears above the input field. I want the icon to appear before the input field. Is there any solution for that? I tried display inline and inline block properties. What can be the solution to this?
Solved : Easy and best to implement by using below concept:
.input{position:relative}
.icon-wrapper{position:absolute; display:block; width:25px; height:25px; left:1px; top:1px;}
.myinput{padding-left:15px;}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<label class="input">
<span class="icon-wrapper"><i class="fa fa-user" aria-hidden="true"></i></span>
<input class="myinput" type="text" name="firstname" id="fn" placeholder="First Name" value="" >
</label>
Try this:
i.fa{
color: #c0c2c7;
margin-right: 10px;
margin-top: 4px;
padding: 2px 8px;
//float:left;
display: inline-block;
width:10%;
}
.myinput
{
//width:100%;
//float:left;
}
input
{
background-color: #3CBC8D;
color: white;
display: inline-block;
padding: 5px 10px;
//float:left;
width:90%;
}
try this
i {
color: #c0c2c7;
margin-right: 10px;
margin-top: 4px;
padding: 2px 8px;
float:left;
display: inline-block;
width: 10%;
}
and remove
.myinput
{
width:100%;
float:left;
}
use bootstrap classes to achieve this functionality like below
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user"></i></span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
More Examples
I am having trouble adding a validation indicator to my input fields in my creditcards form.
For some reason, having the span adds height to the span.input-group-addon, resulting in empty space below the input
<template name="checkoutForm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Title</h4>
</div>
<div class="modal-body">
<form class="bs-example bs-example-form">
<div class="no-margin">
<div class="col-xs-12">
<div class="input-group">
<span class="input-group-addon input-group-sm"><i class="fa fa-credit-card"></i></span>
<input type="text" class="form-control" id="checkoutCardNumber" placeholder="Card Number">
<span class="validity"></span>
</div>
</div>
And LESS
#import '../../../../stylesheets/variables.import.less';
#import '../../../../stylesheets/mixins.import.less';
.checkout-form {
max-width: 350px;
margin: auto;
.no-margin {
.form-group {
width: 80%;
margin: 0px;
}
}
.validity {
overflow: auto;
position: relative;
top: -27px;
left: 215px;
z-index: 1000;
.valid {
color: #brand-primary;
}
.invalid {
color: red;
}
}
}
How can I correct this?
One way of getting rid of the extra whitespace is removing the line feeds or spaces between elements
You can change
<input type="text" class="form-control" id="checkoutCardNumber" placeholder="Card Number">
<span class="validity"></span>
to
<input type="text" class="form-control" id="checkoutCardNumber" placeholder="Card Number"><span class="validity"></span>
Another way is to set the parent element class' font-size attribute to zero.
So try adding
font-size:0;
white-space:nowrap;
to input-group class. Or change the markup as follows
<div class="input-group" style="font-size:0;white-space:nowrap;">
But then you have to specify the font-size attribute in validity class in order to display the text within.
Another way is to add
float:left;
to validity class. You'll probably have to add that to input's class too.
EDIT
It appears that the problem has nothing to do with the issues above.
Simply remove <span class="validity"></span> outside of <div class="input-group"> as follows and see if that works
<div class="input-group">
<span class="input-group-addon input-group-sm"><i class="fa fa-credit-card"></i></span>
<input type="text" class="form-control" id="checkoutCardNumber" placeholder="Card Number">
</div>
<span class="validity"></span>
EDIT 2
Change validity class as follows
.validity {
overflow: auto;
position: absolute;
top: 5px;
left: 215px;
z-index: 1000;
}
and use the markup below (your original)
<div class="input-group">
<span class="input-group-addon input-group-sm"><i class="fa fa-credit-card"></i></span>
<input type="text" class="form-control" id="checkoutCardNumber" placeholder="Card Number">
<span class="validity"></span>
</div>