I am trying to do this in css:
The margin between each element is 10px
The textarea height is 100px and the width is 150px
This is some of my html code for reference:
main form label {
margin: 10px;
}
textarea {
height: 100px;
width: 150px;
}
<main>
<h2>Contact Us</h2>
<form action="#" method="post">
<label>
First name:
<input type="text" name="firstname">
</label>
<label>
Last name:
<input type="text" name="lastname">
</label>
<label>
Email:
<input type="text" name="email">
</label>
<label>
Select Your State:
<select>
<option value="florida">Florida</option>
<option value="california">California</option>
<option value="michigan" selected="selected">Michigan</option>
<option value="new york">New York</option>
<option value="texas">Texas</option>
</select>
</label>
<label>
Male
<input type="radio" name="gender" value="male">
</label>
<label>
Female
<input type="radio" name="gender" value="female">
</label>
<label>
Comment:
<textarea name="comment" id="comment"></textarea>
</label>
<input type='submit' value='Submit' />
</form>
</main>
I am not sure why it isnt working. I have done regular margins before. I just don't know how to make margins between ALL elements.
Inline elements ignore vertical margin. Use inline-block.
main form label {
display: inline-block;
margin: 10px;
}
textarea {
height: 100px;
width: 150px;
}
<main>
<h2>Contact Us</h2>
<form action="#" method="post">
<label>
First name:
<input type="text" name="firstname">
</label>
<label>
Last name:
<input type="text" name="lastname">
</label>
<label>
Email:
<input type="text" name="email">
</label>
<label>
Select Your State:
<select>
<option value="florida">Florida</option>
<option value="california">California</option>
<option value="michigan" selected="selected">Michigan</option>
<option value="new york">New York</option>
<option value="texas">Texas</option>
</select>
</label>
<label>
Male
<input type="radio" name="gender" value="male">
</label>
<label>
Female
<input type="radio" name="gender" value="female">
</label>
<label>
Comment:
<textarea name="comment" id="comment"></textarea>
</label>
<input type='submit' value='Submit' />
</form>
</main>
Try to set the label to display: block; or display: inline-block;.
main form label {
display: block;
margin: 10px;
}
Labels are displayed inline by default and therefore the margin value does not apply as you probably expect. Maybe this helps you to understand the issue: http://maxdesign.com.au/articles/inline/
Related
I have a question regarding aligning the input fields in form using flexbox.
This is my code:
enter image description here
.form {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.form input,
select {
margin-left: 2rem;
}
<div className="form">
<label>
<span>Please write your title: </span>
<select>
<option value="male">Mr.</option>
<option value="female">Mrs.</option>
<option value="female-young">Miss.</option>
</select>
</label>
<label>
<span>Please write your name: </span>
<input type="text" />
</label>
<label>
<span>Please write your surname: </span>
<input type="text" />
</label>
<label>
<span>Please pick today's date: </span>
<input type="date" />
</label>
</div>
I want to align input fields. Thank you in advance for help!
All you need to change is the span tag from span to div.
This will lead to the title taking up the entire screen and the input field being pushed to the new line, aligning all four of them. To make the input fields also inline, just wrap each input field along with the title inside a div as shown below(apologies for the bad formatting).
<div className="form">
<label>
<div>
<span>Please write your title: </span>
<select>
<option value="male">Mr.</option>
<option value="female">Mrs.</option>
<option value="female-young">Miss.</option>
</select>
</div>
</label>
<label>
<div>
<span>Please write your name: </span>
<input type="text" />
</div>
</label>
<label>
<div>
<span>Please write your surname: </span>
<input type="text" />
</div>
</label>
<label>
<div>
<span>Please pick today's date: </span>
<input type="date" />
</div>
</label>
</div>
Grid could help here.
example from your code.
.form {
display: grid;
grid-template-columns:repeat(2,auto);
gap:0.5em;
justify-content:start;
}
label {
display:contents;
}
.form input,
select {
margin:auto;
margin-left: 2rem;
}
<div class="form">
<label>
<span>Please write your title: </span>
<select>
<option value="male">Mr.</option>
<option value="female">Mrs.</option>
<option value="female-young">Miss.</option>
</select>
</label>
<label>
<span>Please write your name: </span>
<input type="text" />
</label>
<label>
<span>Please write your surname: </span>
<input type="text" />
</label>
<label>
<span>Please pick today's date: </span>
<input type="date" />
</label>
</div>
label{display:contents} can be avoided if you do not wrap the input or select inside the label , but link it via the attribute for. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/labelto get the purpose and usage ;)
I added a few more styles to your sample code if this is what you're looking for.
.form {
display: flex;
flex-wrap: wrap;
width: 100%;
}
.form label {
display: flex;
flex-wrap: wrap;
width: 100%;
margin-bottom: 10px;
}
.form label span {
flex: 0 1 28%;
}
.form label input, .form label select {
flex: 0 1 70%;
}
<div class="form">
<label>
<span>Please write your title: </span>
<select>
<option value="male">Mr.</option>
<option value="female">Mrs.</option>
<option value="female-young">Miss.</option>
</select>
</label>
<label>
<span>Please write your name: </span>
<input type="text" />
</label>
<label>
<span>Please write your surname: </span>
<input type="text" />
</label>
<label>
<span>Please pick today's date: </span>
<input type="date" />
</label>
</div>
You don't really need flexbox here. Just define the label elements as display: block (to fill the entire line) and the spans inside them as inline-blocks with a min-width setting that you adjust to the length of the longest span text:
label {
display: block;
}
label>span {
display: inline-block;
min-width: 200px;
}
<div className="form">
<label>
<span>Please write your title: </span>
<select>
<option value="male">Mr.</option>
<option value="female">Mrs.</option>
<option value="female-young">Miss.</option>
</select>
</label>
<label>
<span>Please write your name: </span>
<input type="text" />
</label>
<label>
<span>Please write your surname: </span>
<input type="text" />
</label>
<label>
<span>Please pick today's date: </span>
<input type="date" />
</label>
</div>
After a day of trying, I figured out the solution.
label {
display: flex;
align-items: center;
text-align: start;
}
span {
display: inline-block;
width: 200px;
}
input,
select {
align-items: center;
}
Maybe not the best solution, but it got the job done.
Thanks everyone for help.
I'm trying to highlight the label behind the first unchecked checkbox on the entire page made up by something like this (omitted the extra html in between the div tags for clarity):
.challenges input[type="checkbox"]:not(:checked)~label {
color: lime;
}
<div class="challenges">
<input type="checkbox">
<label for="">test 01</label>
<input type="checkbox">
<label for="">test 02</label>
<input type="checkbox">
<label for="">test 03</label>
</div>
<div class="challenges">
<input type="checkbox">
<label for="">test 01</label>
<input type="checkbox">
<label for="">test 02</label>
<input type="checkbox">
<label for="">test 03</label>
</div>
<div class="challenges">
<input type="checkbox">
<label for="">test 01</label>
<input type="checkbox">
<label for="">test 02</label>
<input type="checkbox">
<label for="">test 03</label>
</div>
<div class="challenges">
<input type="checkbox">
<label for="">test 01</label>
<input type="checkbox">
<label for="">test 02</label>
<input type="checkbox">
<label for="">test 03</label>
</div>
But that checks all the checkboxes which are net checked. I've been trying with first-of-type etc but that didn't work out.
[From comments] Was hoping to find a CSS only way to indicate the label behind the first unchecked checkbox instead of going for a JavaScript approach and add extra fluff which might not be needed. If there's a way with CSS only with some reshuffling or adding some html element to the above please provide it.
Only possible if they are all on the same level, if the multiple grouping DIVs were reduced to just one, so that they all have the same parent.
Then you can set the color for the one checkbox immediately following an unchecked checkbox, and reset it for every label behind a checkbox that is a sibling following the unchecked one ...
.challenges input[type="checkbox"]:not(:checked) + label {
color: lime;
}
.challenges input[type="checkbox"]:not(:checked) ~ input[type="checkbox"] + label {
color: #000;
}
<div class="challenges">
<input type="checkbox">
<label for="">test 01</label>
<input type="checkbox">
<label for="">test 02</label>
<input type="checkbox">
<label for="">test 03</label>
<input type="checkbox">
<label for="">test 01</label>
<input type="checkbox">
<label for="">test 02</label>
<input type="checkbox">
<label for="">test 03</label>
<input type="checkbox">
<label for="">test 01</label>
<input type="checkbox">
<label for="">test 02</label>
<input type="checkbox">
<label for="">test 03</label>
<input type="checkbox">
<label for="">test 01</label>
<input type="checkbox">
<label for="">test 02</label>
<input type="checkbox">
<label for="">test 03</label>
</div>
// get all checkboxes
var firstUncheckedInput = document.querySelectorAll('.challenges input[type="checkbox"]')[0];
firstUncheckedInput.classList.add('firstCheckbox');
.challenges > label{
display:flex;
align-items: center;
}
.challenges .firstCheckbox:not(:checked) + span {
color: red;
}
<fieldset class="challenges">
<label>
<input type="checkbox">
<span>test 1</span>
</label>
<label>
<input type="checkbox">
<span>test 2</span>
</label>
<label>
<input type="checkbox">
<span>test 3</span>
</label>
</fieldset>
<br>
<fieldset class="challenges">
<label>
<input type="checkbox">
<span>test 4</span>
</label>
<label>
<input type="checkbox">
<span>test 5</span>
</label>
<label>
<input type="checkbox">
<span>test 6</span>
</label>
</fieldset>
I was facing the same problem and was able to extend #misorude's excellent answer by adding display: inline-block and specifying an explicit width for both the enclosing <div> and the individual <label> elements. em-based width specifications seem to work best to accommodate the width of the actual checkbox while still providing flexibility with different font sizes. I'm not saying that this is necessarily a recommended way of solving this in CSS, but if you absolutely must, this did the trick for me. I only tested with Chrome, so YMMV.
<html>
<head>
<style>
.steps
{
font-family: '.AppleSystemUIFont';
font-size: 17px;
font-weight: normal;
width: 37em;
color: #777;
}
.steps input[type="checkbox"]:not(:checked) + label
{
color: black;
font-weight: bold;
}
.steps input[type="checkbox"]:not(:checked) ~ input[type="checkbox"] + label
{
color: #777;
font-weight: normal;
}
.step
{
display: inline-block;
width: 35em;
}
</style>
</head>
<body>
<div class="steps">
<input type="checkbox">
<label class="step" for="">Create an immutable cache class</label>
<input type="checkbox">
<label class="step" for="">Use the cache in a naive/straightforward way</label>
<input type="checkbox">
<label class="step" for="">Hide the passing of state (non-monadic)</label>
<input type="checkbox">
<label class="step" for="">Simplify by using monadic methods</label>
<input type="checkbox">
<label class="step" for="">Incorporate state into the original return type</label>
</div>
</body>
</html>
This is my HTML code. I want to hide the radio button using CSS, but when I press F5 it doesn't work.
#ud_tab input[type=radio]{
display: none;
}
<div id="ud_tab">
<input type="radio" name="ud_tabs" id="tab1" checked="">
<label for="tab1">Headline 1</label>
<input type="radio" name="ud_tabs" id="tab2">
<label for="tab2">Headline 2</label>
<input type="radio" name="ud_tabs" id="tab3">
<label for="tab3">Headline 3</label>
</div>
You need to add double quotes to the attribute selector. Change input[type=radio] to input[type="radio"]:
#ud_tab input[type="radio"] {
display: none;
}
<div id="ud_tab">
<input type="radio" name="ud_tabs" id="tab1" checked="">
<label for="tab1">Headline 1</label>
<input type="radio" name="ud_tabs" id="tab2">
<label for="tab2">Headline 2</label>
<input type="radio" name="ud_tabs" id="tab3">
<label for="tab3">Headline 3</label>
</div>
Preview:
I am trying to hide one fieldset using CSS. There are other fieldsets using same CSS class, and I don't want to hide them.
This is how the specific filedset looks like;
<fieldset class="span6">
<legend>Search by User Name</legend>
<label>
User Name:
<input id="kusersearch" data-provide="typeahead" name="searchuser" autocomplete="off" value="" type="text">
</label>
<label>
Exact Name:
<input name="exactname" value="1" type="checkbox">
</label>
</fieldset>
You could do that using nth-child selector as it consist of same class for all fieldsets below,
.span6:nth-child(3){
border:none;
background:#ccc;
}
<fieldset class="span6">
<legend>Search by User Name</legend>
<label>
User Name:
<input id="kusersearch" data-provide="typeahead" name="searchuser" autocomplete="off" value="" type="text">
</label>
<label>
Exact Name:
<input name="exactname" value="1" type="checkbox">
</label>
</fieldset>
<fieldset class="span6">
<legend>Search by User Name</legend>
<label>
User Name:
<input id="kusersearch" data-provide="typeahead" name="searchuser" autocomplete="off" value="" type="text">
</label>
<label>
Exact Name:
<input name="exactname" value="1" type="checkbox">
</label>
</fieldset>
<fieldset class="span6">
<legend>Search by User Name</legend>
<label>
User Name:
<input id="kusersearch" data-provide="typeahead" name="searchuser" autocomplete="off" value="" type="text">
</label>
<label>
Exact Name:
<input name="exactname" value="1" type="checkbox">
</label>
</fieldset>
<fieldset class="span6">
<legend>Search by User Name</legend>
<label>
User Name:
<input id="kusersearch" data-provide="typeahead" name="searchuser" autocomplete="off" value="" type="text">
</label>
<label>
Exact Name:
<input name="exactname" value="1" type="checkbox">
</label>
</fieldset>
Give a id to that fieldset and hide it.
AN unique ID will differentiate it from other elements having the same class.
#unique {
display:none;
}
<fieldset id="unique" class="span6">
<legend>Search by User Name</legend>
<label>
User Name:
<input id="kusersearch" data-provide="typeahead"
name="searchuser" autocomplete="off" value="" type="text">
</label>
<label>
Exact Name:
<input name="exactname" value="1" type="checkbox">
</label>
</fieldset>
Check the snippet its hidden. Hope this helps!
Try This ! Just use hidden attribute with your desired input
<fieldset class="span6">
<legend>Search by User Name</legend>
<label>
User Name:
<input id="kusersearch" data-provide="typeahead" name="searchuser" autocomplete="off" value="" type="text" hidden>
</label>
<label>
Exact Name:
<input name="exactname" value="1" type="checkbox">
</label>
</fieldset>
I spent an hour trying to apply my css to Bootstrap input of type text inside a form. Here's my code:
<form>
<div class="form-group">
<input type="text" name="username" value="" id="username" class="form-control" />
</div>
</form>
input [type=text] {
background-color: red !important;
}
The strange thing is that if I remove the [type=text] part, then all is ok.
JSFiddle
You have to remove the space between input and [type=text]:
input[type=text] {
background-color: red !important;
}
<input type="text"/>
<input type="password"/>
Your background spelling is wrong and remove space.
input [type=text] {
barckground-color: red !important;
}
so make sure you type correct.
input[type=text] {
background-color: red !important;
}
hi try this one hope i can help you:
<div class="form-group">
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr">
<input type="text" name="username" placeholder="input username">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
<input type="text" name="password" placeholder="input password">
</div>
</form>