I have some checkboxes styled to look like a select. I did this by setting the input to display:none and letting the label as the only visible element.
The problem is that I want some margin between the elements but it only seems to work when the checkbox is visible.
HTML:
<div class="dropdown">
<span class="tag">
<span class="tag-text">Talla</span>
<span class="tag-caret">▼</span>
</span>
<div class="dropdown-content">
<input type="checkbox" name="talla[]" id="36" class="filtro">
<label for="36" class="label">36</label>
<br>
<input type="checkbox" name="talla[]" id="37" class="filtro">
<label for="37" class="label">37</label>
<br>
<input type="checkbox" name="talla[]" id="38" class="filtro">
<label for="38" class="label">38</label>
<br>
</div>
</div>
CSS for the part I ask for:
input[type="checkbox"]
{
display:none;
}
label
{
padding:3px;
margin:10px;
border:1px solid lightslategrey;
border-radius: 1px;
}
I suggest you to wrapp the checkboxes and labels with a div instead of doing <br> and add the margin-bottom to those divs
input[type="checkbox"]
{
display:none;
}
label
{
padding:3px;
border:1px solid lightslategrey;
border-radius: 1px;
}
.checkbox-wrapper{
margin-bottom: 10px;
}
<div class="dropdown">
<span class="tag">
<span class="tag-text">Talla</span>
<span class="tag-caret">▼</span>
</span>
<div class="dropdown-content">
<div class="checkbox-wrapper">
<input type="checkbox" name="talla[]" id="36" class="filtro">
<label for="36" class="label">36</label>
</div>
<div class="checkbox-wrapper">
<input type="checkbox" name="talla[]" id="37" class="filtro">
<label for="37" class="label">37</label>
</div>
<div class="checkbox-wrapper">
<input type="checkbox" name="talla[]" id="38" class="filtro">
<label for="38" class="label">38</label>
</div>
</div>
</div>
Use visibility: hidden; instead display:none
input[type="checkbox"]
{
visibility: hidden;
}
label
{
padding:3px;
margin:10px;
border:1px solid lightslategrey;
border-radius: 1px;
}
<div class="dropdown">
<span class="tag">
<span class="tag-text">Talla</span>
<span class="tag-caret">▼</span>
</span>
<div class="dropdown-content">
<input type="checkbox" name="talla[]" id="36" class="filtro">
<label for="36" class="label">36</label>
<br>
<input type="checkbox" name="talla[]" id="37" class="filtro">
<label for="37" class="label">37</label>
<br>
<input type="checkbox" name="talla[]" id="38" class="filtro">
<label for="38" class="label">38</label>
<br>
</div>
</div>
Related
I have an HTML Form, with the input fields already centered, but they are not vertically aligned together.
I would like to have all of the labels and inputs vertically aligned so that all the labels are on the same vertical line, and all the inputs are on the same vertical line.
So far all I have is the fields inside a div:
<div class="container" align="center">
#formContainer{
width:40%;
margin:auto;
}
#formC{
width:100%;
}
.rows{
width:100%;
display:block;
}
.column{
width:100%;
display:inline-block;
}
.theLabels{
width:30%
float:left;
}
.theInputs{
width:60%;
float:right;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="formContainer">
<form id="formC">
<div class="rows">
<div class="column">
<label class="theLabels">
URL:
</label>
<input class="theInputs" type="text"/>
</div>
<div class="column">
<label class="theLabels">
Code Base:
</label>
<input class="theInputs" type="text"/>
</div>
<div class="column">
<label class="theLabels">
Email:
</label>
<input class="theInputs" type="email"/>
</div>
</div>
</form>
</div>
</body>
</html>
If you want 2 columns in a row you should change width:100% in column class to width:48% or make another class with width:48%. Hope it helps
Are you using Bootstrap?
Make a main div and place everything inside it.. like
<div class="container h-100">
<div class="row h-100 justify-content-center align-items-center">
<form class="col-12">
<div class="form-group">
<label for="formGroupExampleInput">Example label</label>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
</div>
<div class="form-group">
<label for="formGroupExampleInput2">Another label</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
</div>
</form>
</div>
</div>
See HERE
A workout for this would be to have a main which holds the entire form, and then wrap every label in a element with a fixed width, you can then do the same with the input elements.
Fiddle:
https://jsfiddle.net/7mnxwdgv/14/
<html>
<head>
<style type="text/css">
div.container {
width: 350px;
padding: 15px;
margin: 50px auto 0px auto;
clear: both;
overflow: hidden;
}
div.container span.label-holder {
display: block;
width: calc(25% - 10px);
float: left;
padding: 5px;
}
div.container span.input-holder {
display: block;
width: calc(75% - 10px);
float: left;
padding: 5px;
}
div.container span.input-holder input[type="text"]{
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<form>
<span class="label-holder"><label for="url">URL</label></span>
<span class="input-holder"><input type="text" id="url" name="url" placeholder="url" /></span>
<span class="label-holder"><label for="code-base">Code Base</label></span>
<span class="input-holder"><input type="text" id="code-base" name="Code-Base" placeholder="Code Base" /></span>
<span class="label-holder"><label for="from">From</label></span>
<span class="input-holder"><input type="text" id="from" name="from" placeholder="From" /></span>
<span class="label-holder"><label for="to">to</label></span>
<span class="input-holder"><input type="text" id="to" name="to" placeholder="To" /></span>
<span class="label-holder"><label for="email">Email</label></span>
<span class="input-holder"><input type="text" id="email" name="email" placeholder="Your Email" /></span>
<span class="label-holder"><label for="app-serv">Application Servers</label></span>
<span class="input-holder">
<select name="app-serv" id="app-serv">
<option value="Incent">Incent</option>
</select>
</span>
</form>
</div>
</body>
</html>
I am trying to put a checkbox, label and input box next to each other.
I separated it into divs and and put divs side-by-side.
I was able to get the buttons center but they are to close together which I am trying to fix too.
My question is how can I get <div class="col-centered border"> into a smaller border and put a checkbox, label and input box next to each other. In the end I want the buttons and all as a container.
html
<div class="col-centered border">
<form>
<div class="first">
<div class="form-group">
<input type="checkbox" class="form-check-input">
<label for="ssn">SSN:</label>
<input type="text" class="form-control-file" id="ssn" placeholder="Social Security Number">
</div>
<div class="form-group row">
<input type="checkbox" class="form-check-input">
<label for="lastname">Lastname:</label>
<input type="text" class="form-control-file" id="lastname" placeholder="Password">
</div>
<div class="form-group row">
<input type="checkbox" class="form-check-input">
<label for="role">Role:</label>
<input type="text" class="form-control-file" id="role" placeholder="Password">
</div>
</div>
<div class="second">
<div class="form-group row">
<input type="checkbox" class="form-check-input">
<label for="userId">User ID:</label>
<input type="text" class="form-control-file" id="userId" placeholder="User Id">
</div>
<div class="form-group row">
<input type="checkbox" class="form-check-input">
<label for="office">Office</label>
<input type="text" class="form-control-file" id="office" placeholder="Office">
</div>
<input type="checkbox">Include Subordinates
</div>
<div class="center-block lower-button">
<div class="center-block">
<button type="submit" class="btn btn-default btn-md left-button">Search</button>
<button type="submit" class="btn btn-default btn-md right-button">Reset</button>
</div>
</div>
</form>
</div>
css
.first {
width: 100px;
float: left;
padding-left: 450px;
}
.second {
width: 200px;
float: right;
padding-right: 950px;
}
.col-centered{
padding-top: 30px;
float: none;
margin: 0 auto;
}
.btn-beside {
position: center;
left: 100%;
top: 0;
margin-left: -10px;
}
.lower-button{
padding-top:250px;
padding-left:575px;
}
.left-button{
padding-right: -14px;
}
.form-group{
text-align: center;
}
I am using bootstrap
Here's a Fiddle for you to take inspiration from.
HTML
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox">
</span>
<span class="input-group-addon">
<label for="tbox">My Label</label>
</span>
<input type="text" id="tbox" class="form-control">
</div>
</div>
</div>
</div>
As per the official documentation for Bootstrap.
I am trying to achieve the following:
A list of text on the left and text input on the right.
This is my attempt, but it is neither working very well or is rather elegant:
.textbox {
width: 400px;
border: solid black 2px;
}
ul {
padding: 5px;
display: inline-block;
list-style-type: none;
}
<div class="textbox">
<h4>Info section</h4>
<ul>
<li>General</li>
<li>Board name</li>
<li>Board image</li>
<li>Short domains</li>
<li>Use short domains?</li>
<li>Get in touch</li>
<li>Add short domain</li>
<li>Delete board</li>
</ul>
<ul>
<li>
<input type="text">
</li>
<li>
<input type="text">
</li>
<li>
<input type="text">
</li>
<li>
<input type="text">
</li>
<li>
<input type="text">
</li>
<li>
<input type="text">
</li>
<li>
<input type="text">
</li>
</ul>
</div>
Can I do, what I want to achieve in another more elegant way?
Using Flexbox you can easily achieve what you want.There are many light weight frameworks which help for such use cases.One small example using such a framework,
Fiddle
<div>
<div class="row around-xs">
<div class="col-xs-6 start-xs">
General
</div>
<div class="col-xs-6">
<input type="text">
</div>
</div>
<div class="row around-xs">
<div class="col-xs-6 start-xs">
General
</div>
<div class="col-xs-6">
<input type="text">
</div>
</div>
<div class="row around-xs">
<div class="col-xs-6 start-xs">
General
</div>
<div class="col-xs-6">
<input type="text">
</div>
</div>
<div class="row around-xs">
<div class="col-xs-6 start-xs">
General
</div>
<div class="col-xs-6">
<input type="text">
</div>
</div>
<div class="row around-xs">
<div class="col-xs-6 start-xs">
General
</div>
<div class="col-xs-6">
<input type="text">
</div>
</div>
</div>
I recommend a framework because you can be more productive in short time.
This is how I would do it :
<div class="container">
<h3 class="container-heading">heading</h3>
<div class="form-item">
<p class="form-item-name">General</p>
<p class="form-item-field"><input type="text"></p>
</div>
</div>
css :
.form-item{width:100%;}
.form-item-name{width:50%; float:left;}
.form-item-field{width:50%; float:left;}
For UI like the one in your OP you can use table:
.textbox {
width: 400px;
border: solid black 2px;
}
.textbox h4 {
margin: 0;
}
table tr td:first-child {
width: 50%;
}
table tr td input {
width: 200px;
}
.textbox table {
padding: 10px;
}
<div class="textbox">
<h4>Info section</h4>
<table>
<tr>
<td>General</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>Board image</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>Board name</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>Board name</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>Add short domain</td>
<td>
<input type="text">
</td>
</tr>
</table>
</div>
Change HTML structure a bit and with Flexbox you can do this
.info {
width: 80%;
margin: 0 auto;
padding: 25px;
border: 1px solid black;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: flex;
margin: 5px;
}
input {
flex: 0 1 60%;
margin-left: auto;
}
<div class="info">
<h3>Info Section</h3>
<ul>
<li><label for="">Lorem ipsum dolor</label> <input type="text"> </li>
<li><label for="">Lorem ipsum dolor amet</label> <input type="text"> </li>
<li><label for="">Lorem </label> <input type="text"> </li>
<li><label for="">Lorem ipsum dolor</label> <input type="text"> </li>
<li><label for="">Lorem ipsum or</label> <input type="text"> </li>
<li><label for="">Lorem ipsum</label> <input type="text"> </li>
</ul>
</div>
First of all use semantic HTML: if you need improve a form on your site, use tags <form> <input> <label> etc.
<form>
<fieldset>
<h4>Info section</h4>
<div>
<label for="general">General</label>
<input id="general" type="text" placeholder="General">
</div>
<div>
<label for="name">Board name</label>
<input id="name" type="text" placeholder="Board name">
</div>
<div>
<label for="image">Board image</label>
<input id="image" type="image" placeholder="Board image">
</div>
<div>
<label for="domains">Short domains</label>
<input id="domains" type="text" placeholder="Short domains">
</div>
<div>
<label for="foo">Use short domains?</label>
<input id="foo" type="text" placeholder="Use short domains?">
</div>
<div>
<label for="touch">Get in touch</label>
<input id="touch" type="text" placeholder="Get in touch">
</div>
<div>
<label for="short_domain">Add short domain</label>
<input id="short_domain" type="text" placeholder="Add short domain">
</div>
<div>
<label for="bar">Delete board</label>
<input id="bar" type="text" placeholder="Delete board">
</div>
</fieldset>
</form>
jsfiddle-link
and I think in the last div instead label and input Delete board should be <button type="submit">Delete board</button> but I don't know clearly, maybe you need this input
With style sheets I float name, email left and nickname and school right but I would like their text boxes to start at the same point. How can I achieve this with CSS?
<div id="container" align="center">
<div id="name">Name:
<input id="name_text" type="text">
</div>
<div id="nickname">Nickname:
<input id="nickname_text" type="text">
</div>
<div id="email">Email Address:
<input id="email_text" type="text">
</div>
<div id="school">School:
<input id="school_text" type="text">
</div>
</div>
You have to use this way:
There should be <label> to make sure when the user clicks on the label text, it focuses on the respective input.
The <strong> tag has a display: inline-block making it easy to set the width.
You don't need so many ids.
You need to give name attribute to all the <input /> fields.
label strong {display: inline-block; width: 150px; text-align: left; margin: 0 0 10px;}
<div id="container" align="center">
<div id="name">
<label>
<strong>Name:</strong>
<input id="name_text" type="text" />
</label>
</div>
<div id="nickname">
<label>
<strong>Nickname:</strong>
<input id="nickname_text" type="text" />
</label>
</div>
<div id="email">
<label>
<strong>Email Address:</strong>
<input id="email_text" type="text" />
</label>
</div>
<div id="school">
<label>
<strong>School:</strong>
<input id="school_text" type="text" />
</label>
</div>
</div>
li {
list-style-type: none;
}
li p {
display: inline-block;
width: 120px;
text-align: left;
font-family: "Times New Roman";
font-style: oblique;
font-size: 14px;
}
<div id="container" align="center">
<ul>
<li>
<p>Name:</p>
<input type="text">
</li>
<li>
<p>Nickname:</p>
<input type="text">
</li>
<li>
<p>Email Address:</p>
<input type="text">
</li>
<li>
<p>School:</p>
<input type="text">
</li>
</ul>
</div>
Codepen
A little modification,copy this code and check it.
<html>
<head>
<style>
label strong {display: inline-block; width: 150px; text-align: left; margin: 0 0 10px;}
</style>
</head>
<body>
<center>
<div id="Holder" style="width:50%;">
<div id="L_div" style="float:left;">
<div id="container" align="center">
<div id="name">
<label>
<strong>Name:</strong>
<input id="name_text" type="text" />
</label>
</div>
<div id="email">
<label>
<strong>Email Address:</strong>
<input id="email_text" type="text" />
</label>
</div>
</div>
</div>
<div id="R_div" style="float:right;">
<div id="nickname">
<label>
<strong>Nickname:</strong>
<input id="nickname_text" type="text" />
</label>
</div>
<div id="school">
<label>
<strong>School:</strong>
<input id="school_text" type="text" />
</label>
</div>
</div>
</div>
</div>
</center>
</body>
</html>
If you are a fresher in css use this site W3school for guidence
Regds
Is there anyway to get the text of a checkbox to be on the left side of the checkbox? I have tried and tried but cant get it working.
I'm using
<div class="col-xs-4 col-sm-3 col-md-2 col-md-offset-2 everything-checkbox">
<div class="checkbox">
<label>
<input type="checkbox" class="checkbox style-2 " checked="checked">
<span>Text goes here</span>
</label>
</div>
I have tried putting the span on top and that also doesn't work, Then if I make it a blank checkbox and just put text in front then they don't line up.
any help would be really appreciated.
Bootstrap styling will float the checkbox elements to the left because of this styling:
.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
float: left;
margin-left: -20px;
}
To solve this, you could simply add pull-right to the input element's class:
<input type="checkbox" id="checkbox1" class="checkbox style-2 pull-right" checked="checked"/>
It's also worth noting that a label element should have a for attribute matching the input element's id attribute, like this:
<div class="checkbox">
<label for="checkbox1">
<span>Text goes here</span>
</label>
<input type="checkbox" id="checkbox1" class="checkbox style-2 pull-right" checked="checked"/>
</div>
UPDATED EXAMPLE HERE
Using form-check-prepend in parent div
<form>
<div>
<div class="form-check-prepend">
<label class="form-input-label" for="checkbox1">
This is the label for the checkbox
</label>
<input
type="checkbox1"
class="form-check-input pull-right"
id="checkbox1"
/>
</div>
</div>
</form>
I'm currently using this on my website. I have not tested it across different devices and/or browsers. Comments welcome...
This should do it! JSFiddle
<div class="col-xs-4 col-sm-3 col-md-2 col-md-offset-2 everything-checkbox">
<div class="checkbox">
<label>
<span>Text goes here</span>
<input type="checkbox" class="checkbox style-2 " checked="checked">
</label>
</div>
How about this (note left-checkbox class):
<div class="form-group">
<div class="col-xs-4">
<div class="checkbox left-checkbox">
<label>
Text goes here
</label>
</div>
</div>
<div class="col-xs-8">
<div class="checkbox left-checkbox">
<input type="checkbox">
</div>
</div>
</div>
with css
.left-checkbox label {
text-align: right;
float: right;
font-weight: bold;
}
.left-checkbox input[type=checkbox] {
margin-left: 0;
}
Looks fine to me.
I am always looking for simple solutions first.
A KISS solution is:
<span style="white-space: nowrap;">Do Not Reverse Import
<label>
<input
type="checkbox"
name="DoNotReverseImport"
value="DoNotReverseImport"
OnChange = "OffYouGo('DoNotReverseImport');"
title = 'Check if old entries appear first in your import'
>
</label>
</span>
There are 2 things to correct to have Bootstrap 3 checkbox to the right of label text:
margin-left: -20px for checkbox
padding-left: 20px for label
Checkbox's size is 12.8px.
So our new values should be:
for checkbox: margin-left: 7.2px
for label: padding-right: 20px
Here is an example:
.checkbox.checkbox-left-label label,
.checkbox-inline.checkbox-left-label {
padding-left: unset;
padding-right: 20px;
}
.checkbox.checkbox-left-label input[type=checkbox],
.checkbox-inline.checkbox-left-label input[type=checkbox] {
margin-left: 7.2px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<h5>Checkboxes with labels on the left side:</h5>
<p>
<div class="checkbox checkbox-left-label">
<label>Option 1<input type="checkbox" value=""></label>
</div>
<div class="checkbox checkbox-left-label">
<label>Option 2<input type="checkbox" value=""></label>
</div>
<div class="checkbox checkbox-left-label disabled">
<label>Option 3<input type="checkbox" value="" disabled></label>
</div>
</p>
</div>
<div class="container">
<h5>Inline checkboxes with labels on the left side:</h5>
<p>
<label class="checkbox-inline checkbox-left-label">Option 1<input type="checkbox" value=""></label>
<label class="checkbox-inline checkbox-left-label">Option 2<input type="checkbox" value=""></label>
<label class="checkbox-inline checkbox-left-label disabled">Option 3<input type="checkbox" value="" disabled></label>
</p>
</div>