I want to make layout of div inside which there are 3 captions fitting into same size!
I am using angular materialise - Normal html / css also works for me.
I have tried
<div>
<label> Label 1 </label>
<label> Label 2 </label>
<label> Label 3 </label>
</div>
I have attached an image of what I need.
Should I use same 3 divs inside? or span / labels?
Here is what u needed.
.tabs label {
padding: 10px 20px;
border-left: 1px solid #ccc;
border-right: 0;
float: left;
}
label.selected {
background: #ccc;
}
.tabs label:first-child {
border-left: 0;
}
.tabs {
margin: 10px;
display: inline-block;
border: 1px solid #ccc;
border-radius: 20px;
overflow:hidden;
}
<div class="tabs">
<label class="selected"> Label 1 </label>
<label> Label 2 </label>
<label> Label 3 </label>
</div>
Related
I want my form layout to look like the picture below:
This is what I currently have:
label {
display: inline-block;
border: 1px solid red;
}
input {
display: inline-block;
width: 28%;
margin-top: 1.5em;
margin-left: 2em;
border: 1px solid greenyellow;
}
<label for="First_Name"> First Name: </label>
<input type="text" id="First_Name">
<label for="Last_Name"> Last Name: </label>
<input type="text" id="Last_Name">
This is my output:
There are many ways to achieve this. Here is one possibility:
wrap each pair of label and input in a div (or similar)
use flexbox to get them to stack vertically
Everything else seems to be just a matter of inspecting the reference regarding the used colors and sizes, which you can do by using your Browser's Inspector (or looking at the source code). Alternatively, bring the provided image into an image editing program and check the colors there.
Here is a rough approximation based on the approach outlined above:
body {
background-color: #f6f7f5;
}
fieldset {
display: flex; /* use flexbox for content */
justify-content: center; /* center items horizontally */
border: none; /* remove default fieldset border */
}
.input {
flex-grow: 1; /* take up free space within parent */
flex-basis: 50%; /* width (before growing/shrinking) */
display: flex; /* use flexbox for content */
flex-direction: column; /* arrange content vertically */
margin: 1rem;
}
label {
padding: 0.5rem 0;
font-family: sans-serif;
font-size: 11pt;
color: #5b5b60;
}
input {
padding: 0.5rem;
color: #9d9d9d;
background: #fff;
border: 1px solid #ccc;
border-radius: 2px;
box-shadow:inset 0 1px 1px #eee;
}
.required label::after {
content: "*";
}
.required input {
border: 1px solid #a94442;
}
<fieldset>
<div class="input required">
<label for="First_Name">First Name:</label>
<input type="text" id="First_Name">
</div>
<div class="input">
<label for="Last_Name">Last Name:</label>
<input type="text" id="Last_Name">
<div>
</fieldset>
Try this code
label {
display: block;
}
input {
display: block;
width: 100%;
border: 1px solid greenyellow;
padding: 4px
}
.overflow {
width: 100%;
overflow: hidden
}
.pull-left {
width: calc(50% - 20px);
float: left;
margin: 10px
}
<div class="overflow">
<div class="pull-left">
<label for="First_Name"> First Name: </label>
<input type="text" id="First_Name">
</div>
<div class="pull-left">
<label for="Last_Name"> Last Name: </label>
<input type="text" id="Last_Name">
</div>
</div>
Here's the Example of jsfiddle
I have created the dummy radio buttons with my custom CSS,
As you can see in above example border is looking jagged.
I have added below custom css for box shadow
input[type='radio']:checked + label:before {
background: #3A3A3A;
box-shadow: inset 0px 0px 0px 4px #DEDEDE;
}
Here you can see the difference
without border-radius it seems like --
with border-radius it seems like --
You can see the difference in these two images,
Please see above fiddle example and give some suggestions.
Add margin to the li
ul.gfield_radio li{
padding-bottom: 5px;
}
.gfield_radio input[type='radio']+label:before {
content: '';
background: #DEDEDE;
border: 1px solid #359947;
display: inline-block;
vertical-align: middle;
width: 40px;
height: 40px;
padding: 2px;
margin-right: 10px;
text-align: center;
border-radius: 50%;
box-sizing: border-box;
}
.gfield_radio input[type='radio'] {
display: none;
}
.gfield_radio input[type='radio']:checked+label:before {
background: #3A3A3A;
box-shadow: inset 0px 0px 0px 4px #DEDEDE;
}
ul {
list-style: none;
margin-left: 0;
}
ul.gfield_radio li {
padding-bottom: 5px;
}
ul.gfield_checkbox li label {
display: inline-block;
line-height: 1.2;
}
<ul class="gfield_radio" id="input_1_3">
<li class="gchoice_1_3_0">
<input name="input_3" type="radio" value="First Choice" id="choice_1_3_0" tabindex="2">
<label for="choice_1_3_0" id="label_1_3_0">
First Choice
</label>
</li>
<li class="gchoice_1_3_1">
<input name="input_3" type="radio" value="Second Choice" id="choice_1_3_1" tabindex="3">
<label for="choice_1_3_1" id="label_1_3_1">
Second Choice
</label>
</li>
<li class="gchoice_1_3_2">
<input name="input_3" type="radio" value="Third Choice" id="choice_1_3_2" tabindex="4">
<label for="choice_1_3_2" id="label_1_3_2">
Third Choice
</label>
</li>
</ul>
I'm making a tab system only with CSS using :target and :checked pseudoclasses, but I have an anchor inside the label, and the label doesn't trigger the :checked.
If you click in the anchor, the :checked doesn't trigger because the click is in the <a> tag, but is inside a <label> that must trigger the radio button. If you click on the border of the tab, you'll see how it triggers the :checked, but not the anchor, so the :target can't be triggered.
Here you are my code, more understandable than the words:
a {
text-decoration: none;
}
.tabs {
position: relative;
}
input {
display: none;
}
.tabs .tab label {
text-decoration: none;
border: 1px solid black;
padding: 2px;
display: inline-block;
top: 2px;
position: relative;
cursor: pointer;
}
.tabs .tab input:checked + label {
background-color: white;
border-bottom: 0;
padding: 4px 2px;
top: 1px;
}
.contents {
border: 1px solid black;
background-color: white;
}
.contents .content {
display: none;
padding: 20px;
}
.contents .content:target {
display: block;
}
<div class="tabs">
<span class="tab">
<input type="radio" name="ch" id="check1">
<label for="check1">
Tab 1
</label>
</span>
<span class="tab">
<input type="radio" name="ch" id="check2">
<label for="check2">
Tab 2
</label>
</span>
<span class="tab">
<input type="radio" name="ch" id="check3">
<label for="check3">
Tab 3
</label>
</span>
</div>
<div class="contents">
<div class="content" id="tab1">Contenido 1</div>
<div class="content" id="tab2"><strong>Contenido 2</strong></div>
<div class="content" id="tab3"><em>Contenido 3</em></div>
</div>
Is there a way to combine :checked and :target pseudoclasses to achieve a complete tab system only with CSS?
Thank you.
EDIT
Here you are the snippet without anchor. Obviously the :target will not be triggered:
a {
text-decoration: none;
}
.tabs {
position: relative;
}
input {
display: none;
}
.tabs .tab label {
text-decoration: none;
border: 1px solid black;
padding: 2px;
display: inline-block;
top: 2px;
position: relative;
cursor: pointer;
}
.tabs .tab input:checked + label {
background-color: white;
border-bottom: 0;
padding: 4px 2px;
top: 1px;
}
.contents {
border: 1px solid black;
background-color: white;
}
.contents .content {
display: none;
padding: 20px;
}
.contents .content:target {
display: block;
}
<div class="tabs">
<span class="tab">
<input type="radio" name="ch" id="check1">
<label for="check1">
Tab 1
</label>
</span>
<span class="tab">
<input type="radio" name="ch" id="check2">
<label for="check2">
Tab 2
</label>
</span>
<span class="tab">
<input type="radio" name="ch" id="check3">
<label for="check3">
Tab 3
</label>
</span>
</div>
<div class="contents">
<div class="content" id="tab1">Contenido 1</div>
<div class="content" id="tab2"><strong>Contenido 2</strong></div>
<div class="content" id="tab3"><em>Contenido 3</em></div>
</div>
When you use input:checked, :target is not efficient cause this event is not triggered at all.
You need to put your input ahead in the flow so you can use the selector ~ to select any sibblings and their children following in the flow of the document:
example
a {
text-decoration: none;
}
.tabs {
position: relative;
}
input {
display: none;
}
.tabs .tab label {
text-decoration: none;
border: 1px solid black;
padding: 2px;
display: inline-block;
top: 2px;
position: relative;
cursor: pointer;
}
#check1:checked ~ .tabs label[for="check1"],
#check2:checked ~ .tabs label[for="check2"],
#check3:checked ~ .tabs label[for="check3"] {
background-color: white;
border-bottom: 0;
padding: 4px 2px;
top: 1px;
}
.contents {
border: 1px solid black;
background-color: white;
}
.contents .content {
display: none;
padding: 20px;
}
#check1:checked ~ .contents #tab1,
#check2:checked ~ .contents #tab2,
#check3:checked ~ .contents #tab3 {
display: block;
}
<!-- begin hidden inputs for CSS tabs purpose -->
<input type="radio" name="ch" id="check1">
<input type="radio" name="ch" id="check2">
<input type="radio" name="ch" id="check3">
<!-- End hidden inputs for CSS tabs purpose -->
<div class="tabs">
<span class="tab">
<label for="check1">
Tab 1
</label>
</span>
<span class="tab">
<label for="check2">
Tab 2
</label>
</span>
<span class="tab">
<label for="check3">
Tab 3
</label>
</span>
</div>
<div class="contents">
<div class="content" id="tab1">Contenido 1</div>
<div class="content" id="tab2"><strong>Contenido 2</strong>
</div>
<div class="content" id="tab3"><em>Contenido 3</em>
</div>
</div>
This behavior is specified in HTML5 (emphasis mine):
The activation behavior of a label element for events
targeted at interactive content descendants of a label
element, and any descendants of those interactive content
descendants, must be to do nothing.
Since the link is interactive content, clicking on it won't check the labeled radio input.
I have a checkbox within a div that is appearing higher than the text I want it to be aligned with.
Here's how it appears in Firefox:
As you can see, the checkbox is just a few pixels higher than the text. I have tried applying various padding / margins, including negative values, but to no avail.
HTML:
<div id="read-confirm-box">
I Have read the above
<input type="checkbox" id="checkbox" />
</div>
CSS:
#read-confirm-box
{
color: #FFF;
width: 180px;
font-size: 12px;
background-color: #333;
border-radius: 3px;
padding: 6px 11px;
margin: auto;
float: left;
}
#checkbox
{
/* Empty */
}
check this jsFiddle
HTML
<div id="read-confirm-box">
I Have read the above
<input type="checkbox" id="checkbox" />
</div>
CSS
#read-confirm-box
{
color: #FFF;
width: 180px;
font-size: 12px;
background-color: #333;
border-radius: 3px;
padding: 6px 11px;
margin: auto;
float: left;
}
#checkbox
{
position: relative;
top: 3px;
}
You can wrap both text and input into a div, It's a good practice.
To align both the divs containing text and control accordingly, use display properties
Try:
HTML
<div id="read-confirm-box">
<div class="inline">I Have read the above </div>
<div class="inline"><input type="checkbox" id="checkbox" /></div>
</div>
<label for="checkbox">I Have read the above </label>
<input type="checkbox" id="checkbox" />
<span>I Have read the above </span>
<span><input type="checkbox" id="checkbox" /></span>
CSS
.inline{
display:inline-block;
vertical-align:middle;
}
Fiddle Example
Updated
Try to use following css.
#checkbox {
vertical-align: middle;
}
The checkbox is likely higher for lack of a reset.css (browsers apply their own defaults).
For usability, you should use the label element, rather than wrapping the input and text in extra divs.
Give the input and label the same margin and voila!
HTML
<div id="read-confirm-box">
<input type="checkbox" id="checkbox" />
<label for="checkbox">I Have read the above </label>
</div>
CSS
#read-confirm-box {
color: #FFF;
width: 180px;
font-size: 12px;
background-color: #333;
border-radius: 3px;
padding: 6px 11px;
margin: auto;
float: left;
}
input {
margin: 3px;
}
label {
float:left;
margin: 3px;
}
http://jsfiddle.net/djungle/x6EUp/1/
Pretty easy fix.
CSS:
#checkbox {
vertical-align:middle;
}
Or as an alternative, forking that fiddle: Fiddle
#checkbox
{
vertical-align:-2px;
}
I have a form which code looks like this:
<div id="right_sidebar">
<form id="your_name" name="your_name" action="#" method="post" style="display: block; ">
<fieldset>
<label for="name">Name</label>
<input type="text" name="name" id="name" value="">
<label for="lastname">Last Name</label>
<input type="text" name="lastname" id="lastname">
<label for="msg">Comment <span class="sp"></span></label>
<textarea name="msg" id="msg" rows="7"></textarea>
<input type="checkbox" name="agree">
<label for="agree">Accept the terms</label>
<button class="blue_button" type="submit">Send</button>
</fieldset>
</form>
</div>
And which is styled with the following CSS:
body {
color: #333;
font: 12px Arial,Helvetica Neue,Helvetica,sans-serif;
}
#right_sidebar {
padding-top: 12px;
width: 190px;
position:relative;
}
form {
background: #EEF4F7;
border: solid red;
border-width: 1px 0;
display: block;
margin-top: 10px;
padding: 10px;
}
form label {
color: #435E66;
display:block;
font-size: 12px;
}
form textarea {
border: 1px solid #ABBBBE;
margin-bottom: 10px;
padding: 4px 3px;
width: 160px;
-moz-border-radius: 3px;
border-radius: 3px;
}
form label a {
display: block;
padding-left: 10px;
position: relative;
text-decoration: underline;
}
form label a .sp {
background: #EEF4F7;
height: 0;
left: 0;
position: absolute;
top: 2px;
width: 0;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 4px solid #333;
}
form button.blue_button {
margin-top: 10px;
vertical-align: top;
}
button.blue_button{
color: white;
font-size: 12px;
height: 22px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
button.blue_button {
background-color: #76C8C6;
border: 1px solid #7798B7;
text-shadow: 1px 1px 0px #567C9E;
}
As you can see the checkbox is on top of the label. I would like both to be "on the same line". So, it would look like "[ ] Accept the terms". And how would I make that the text is vertically aligned to the checkbox.
How could I do both?
You can see it live here: form, checkbox failing
One option is to amend the style of the label element that follows the checkbox:
input[type=checkbox] + label {
display: inline-block;
margin-left: 0.5em;
margin-right: 2em;
line-height: 1em;
}
JS Fiddle demo.
This is, however, somewhat fragile as the margins are a little arbitrary (and the margin-right is purely to force the following button to the next line). Also the attribute-equals selector may cause problems in older browsers.
As implied, in comments, by Mr. Alien it is actually easier to target the checkbox itself with this selector-notation:
input[type=checkbox] {
float: left;
margin-right: 0.4em;
}
JS Fiddle demo.
It is because the label has display: block on it. It means that (without a float or hack) it will claim it's own line.
Change it to display: inline-block or leave the display rule away and you're done.
Seeing you did this intentionally for the first two labels, you should give the accept the terms label an id and use form #accepttermslabel {display: inline-block}. This will override the other rules et because it is more specific.
Wrap your checkbox and text within the <label> tag. Works with your current CSS as seen here in this jsFiddle Demo.
<label for="checkbox">
<input id="checkbox" type="checkbox"> My Label
</label>
Forked your fiddle here with one small change. I nested the checkbox inside the label.
<label for="agree"><input type="checkbox" name="agree">Accept the terms</label>
Hope it helps.
All you need to do is add display: inline to the label. Like this:
label[for="agree"] {
display: inline;
}
You may also have to add the following to get the Send button to stay on its own line:
button[type="submit"] {
display: block;
}
That is enough to make it work, but you could also nest the input inside the label, like this:
<label for="agree">
<input type="checkbox" name="agree" />
Accept the terms
</label>
However, most people avoid doing this because it is semantically constricting. I would go with the first method.
Set a class on the checkbox list as follows:
<asp:CheckBoxList ID="chkProject" runat="server" RepeatLayout="Table" RepeatColumns="3" CssClass="FilterCheck"></asp:CheckBoxList>
Then add the following CSS:
.FilterCheck td {
white-space:nowrap !important;
}
This ensures the label stays on the same line as the checkbox.
I had the same problem with bootstrap 3 horizontal-form, and finally found a try-error solution and works with plain html-css too.
Check my Js Fiddle Demo
.remember {
display: inline-block;
}
.remember input {
position: relative;
top: 2px;
}
<div>
<label class="remember" for="remember_check">
<input type="checkbox" id="remember_check" /> Remember me
</label>
</div>
Tried the flex attribute?
Here's your example with flex added:
HTML
<div id="right_sidebar">
<form id="send_friend" name="send_friend" action="#" method="post" style="display: block; ">
<fieldset>
<label for="from">From</label>
<input type="text" name="from" id="from" value="">
<label for="to">To</label>
<input type="text" name="to" id="to">
<label for="msg">Comment <span class="sp"></span>
</label>
<textarea name="msg" id="msg" rows="7"></textarea>
<div class="row">
<div class="cell" float="left">
<input type="checkbox" name="agree">
</div>
<div class="cell" float="right" text-align="left">
<label for="agree">Accept the terms</label>
</div>
</div>
<button class="blue_button" type="submit">Send</button>
</fieldset>
</form>
</div>
CSS
body {
color: #333;
font: 12px Arial, Helvetica Neue, Helvetica, sans-serif;
}
[class="row"] {
display: flex;
flex-flow: row wrap;
margin: 2 auto;
}
[class="cell"] {
padding: 0 2px;
}
#right_sidebar {
padding-top: 12px;
width: 190px;
position:relative;
}
form {
background: #EEF4F7;
border: solid red;
border-width: 1px 0;
display: block;
margin-top: 10px;
padding: 10px;
}
form label {
color: #435E66;
display:block;
font-size: 12px;
}
form textarea {
border: 1px solid #ABBBBE;
margin-bottom: 10px;
padding: 4px 3px;
width: 160px;
-moz-border-radius: 3px;
border-radius: 3px;
}
form label a {
display: block;
padding-left: 10px;
position: relative;
text-decoration: underline;
}
form label a .sp {
background: #EEF4F7;
height: 0;
left: 0;
position: absolute;
top: 2px;
width: 0;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 4px solid #333;
}
form button.blue_button {
margin-top: 10px;
vertical-align: top;
}
button.blue_button {
color: white;
font-size: 12px;
height: 22px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
button.blue_button {
background-color: #76C8C6;
border: 1px solid #7798B7;
text-shadow: 1px 1px 0px #567C9E;
}
Flex allows for table style control with the use of divs for example.
The simplest way I found to have the checkbox and the label aligned is :
.aligned {
vertical-align: middle;
}
<div>
<label for="check">
<input class="aligned" type="checkbox" id="check" /> align me
</label>
</div>
<div>
<input class="aligned" type="checkbox" />
<label>align me too</label>
</div>
<div>
<input type="checkbox" />
<label>dont align me</label>
</div>
I know this post is old, but I'd like to help those who will see this in the future. The answer is pretty simple.
<input type="checkbox" name="accept_terms_and_conditions" value="true" />
<label id="margin-bottom:8px;vertical-align:middle;">I Agree</label>