I want to make a form when on clicked the label would go up 15px and you can write the text, but I can't figure out how to do it with my current code. I think the problem is how I select the label and input.
I tried these ways:
.form-row-field-input:focus ~ label,
.form-row-field-input:valid ~ label {
top: -12px;
left: 0;
font-size: 12px;
color: #003333;
font-weight: bold;}
input[type=text]:focus~label {
display:block;
color: black;
top: -20px;
font-size: 14px;}
<div class="form-inputs">
<form action="" method="POST">
<div class="form-row">
<span class="form-row-number">01</span>
<label for="POST-name" class="form-row-field">First name</label>
<input type="text" class="form-row-field-input">
</div>
<div class="form-row">
<span class="form-row-number">02</span>
<label for="POST-lastname" class="form-row-field">Last name</label>
<input type="text" class="form-row-field-input">
</div>
<div class="form-row">
<span class="form-row-number">03</span>
<label for="POST-email" class="form-row-field">Email</label>
<input type="text" class="form-row-field-input">
</div>
<input class="form-btn" type="submit" value="Get it">
</form>
</div><!--end-->
/** CSS **/
.form-inputs {
padding: 40px;
flex: 60%;
display: flex;
flex-direction: column;
align-content: center;
justify-content: center;
position: relative;
}
.form-btn {
margin: 20px 0px;
background-color: #f6fe00;
color: black;
padding: 10px 40px;
font-weight: 700;
border: none;
cursor: pointer;
}
.form-row {
border-bottom: 1px solid grey;
padding: 10px 0px;
position: relative;
}
.form-row-number {
color: #8f63ff;
padding-right: 10px;
}
.form-row-field {
color: #9b91f5;
position: absolute;
pointer-events: none;
transition: 0.5s;
top: 10px;
margin-left: 1em;
}
.form-row-field-input {
background-color: inherit;
border: none;
display: block;
position: absolute;
top: 10px;
transition: 0.5s;
margin-left: 1.5em;
}
I expect that when clicked on input, the label would go up with a transition
The general sibling selector in CSS that you're using can only target elements that come AFTER, so since the label comes before the input in your HTML, it's not actually applying the CSS.
You can get the intended effect simply be moving the label element after the input. Google's Material UI also takes this approach in order to keep it primarily CSS to achieve the intended visual effect.
Here it is with the label elements moved to after the input and slightly tweaked CSS:
<body>
<div class="form-inputs">
<form action="" method="POST">
<div class="form-row">
<span class="form-row-number">01</span>
<input type="text" class="form-row-field-input">
<label for="POST-name" class="form-row-field">First name</label>
</div>
<div class="form-row">
<span class="form-row-number">02</span>
<input type="text" class="form-row-field-input">
<label for="POST-lastname" class="form-row-field">Last name</label>
</div>
<div class="form-row">
<span class="form-row-number">03</span>
<input type="text" class="form-row-field-input">
<label for="POST-email" class="form-row-field">Email</label>
</div>
<input class="form-btn" type="submit" value="Get it">
</form>
</div>
<!--end-->
</body>
.form-inputs {
padding: 40px;
flex: 60%;
display: flex;
flex-direction: column;
align-content: center;
justify-content: center;
position: relative;
}
.form-btn {
margin: 20px 0px;
background-color: #f6fe00;
color: black;
padding: 10px 40px;
font-weight: 700;
border: none;
cursor: pointer;
}
.form-row {
border-bottom: 1px solid grey;
padding: 10px 0px;
position: relative;
}
.form-row-number {
color: #8f63ff;
padding-right: 10px;
}
.form-row-field {
color: #9b91f5;
position: absolute;
pointer-events: none;
transition: 0.5s;
top: 10px;
margin-left: 1em;
}
.form-row-field-input {
background-color: inherit;
border: none;
display: block;
position: absolute;
top: 10px;
transition: 0.5s;
margin-left: 1.5em;
}
.form-row-field-input:focus~label {
top: -5px;
font-size: 12px;
color: #003333;
font-weight: bold;
}
https://jsfiddle.net/7urgeL60/
Related
I want to create a cool animation that when the user clicks on the email input or the password the label of the input will go up and have a nice transition in the bottom border.
This is what I have:
And this is what I want to create:
My code:
.form {
position: relative;
display: flex;
flex-direction: column;
margin-bottom: 1rem;
}
.input {
background: none;
color: #c6c6c6;
font-size: 1.8rem;
padding: 1.6rem;
display: block;
border: none;
border-bottom: 1px solid #c6c6c6;
width: 100%;
}
.label {
position: absolute;
color: #c6c6c6;
font-size: 1.6rem;
left: 0.5rem;
top: 1rem;
}
<div class="form">
<input class="email input" type="email" name="email" />
<label class="label" for="email">Email Address</label>
</div>
<div class="form">
<input class="password input" type="password" name="password" />
<label class="label" for="password">Password</label>
</div>
I've searched a lot but every code example I found was with SCCS, SASS and I don't understand it. So please help me with plain CSS. Any help would be greatly appreciated!
I created an animated demo using HTML and CSS.
.main {
width: 500px;
margin: 50px 100px;
;
}
.form-group {
position: relative;
margin-bottom: 45px;
}
input {
display: block;
width: 300px;
font-size: 14pt;
padding: 10px;
border: none;
border-bottom: 1px solid #ccc;
}
input:focus {
outline: none;
}
label {
position: absolute;
top: 10px;
left: 5px;
color: #999;
font-size: 14pt;
font-weight: normal;
pointer-events: none;
transition: all 0.2s ease;
}
input:focus ~ label,
input:valid ~ label {
top: -20px;
font-size: 10pt;
color: #5264AE;
}
.bar {
display: block;
position: relative;
width: 320px;
}
.bar:before,
.bar:after {
content: "";
height: 2px;
width: 0;
bottom: 1px;
position: absolute;
background: #5264AE;
transition: all 0.2s ease;
}
.bar:before {
left: 50%;
}
.bar:after {
right: 50%;
}
input:focus ~ .bar:before,
input:focus ~ .bar:after {
width: 50%;
}
<div class="main">
<div class="form-group">
<input type="text" name="email" required />
<span class="highlight"></span>
<span class="bar"></span>
<label for="email">Email</label>
</div>
<div class="form-group">
<input type="password" name="password" required />
<span class="highlight"></span>
<span class="bar"></span>
<label for="password">Password</label>
</div>
</div>
I attached your code modified to work as intended, you can change any value to customize as you want but here's an explanation of how it works:
Input element
I added a z-index so that the user can click where the label is positioned and click the input instead of the label itself, also added a transition to make the animation smooth.
input:focus refers when input is active (user click or selected by pressing tab key).
And here's where the magic happens and the explanations of complex selectors:
.input:focus~.label,
.input:not([value=""]):not(:focus):invalid~.label,
.input.has-content~.label {
font-size: .7rem;
top: -.4rem;
color: blue;
}
.input:focus ~ .label selects all input's element siblings with the class .label when input is focus so that when user focus in the input the label'll be above.
.input:not([value=""]):not(:focus):invalid~.label this selector'll catch when user unfocus the input but it got content, so the label don't goes down and overlap with the username. (as the password type input doesn't have value attribute I attach you a Js snippet that do the same trick for password element, simply adding the class has-content to the element)
Hope it helps you!
document.querySelector('.password').oninput = (e) => {
e.target.value.length > 0 ?
e.target.classList.add('has-content') :
e.target.classList.remove('has-content')
}
.form {
position: relative;
display: flex;
flex-direction: column;
margin: 1rem;
}
.input {
height: 20px;
background: none;
color: #c6c6c6;
font-size: 1rem;
padding: .5rem .7rem;
display: block;
border: none;
border-bottom: 2px solid #c6c6c6;
width: 100%;
z-index: 2;
transition: all .3s ease;
}
.input:focus {
outline: transparent;
border-color: blue;
}
.input:focus~.label,
.input:not([value=""]):not(:focus):invalid~.label,
.input.has-content~.label {
font-size: .7rem;
top: -.4rem;
color: blue;
}
.label {
position: absolute;
color: #c6c6c6;
font-size: 1rem;
left: 0.5rem;
top: .6rem;
transition: all .3s ease;
}
<div class="form">
<input class="email input" type="email" name="email" />
<label class="label" for="email">Email Address</label>
</div>
<div class="form">
<input class="password input" type="password" name="password" />
<label class="label" for="password">Password</label>
</div>
I'm designing an online clothing store, and on the product's page I want the product info (on the right) to align with the center of the image (on the left) while both of the divs are centered with the page. However, it seems that no matter what I do, the product info is always pushed down to the bottom corner of the image. It works when the image is removed completely, but unless that happens no formatting in CSS will affect the product-info div.
I've tried floating the elements to the left but that negates the text-align that keeps them centered, and any padding, margin, or dimension changes I make to the product-info only adds to the bottom of the div rather than shifting it up. There's probably something obvious that I'm overlooking, but I've been working on this problem for so long and just can't seem to find a fix.
Can someone please help me?
> Screenshot of how it looks <
* {
margin: 0px;
padding: 0px;
}
.product {
text-align: center;
}
.product-view {
top: 40px;
padding: 10px;
margin: 10px;
display: inline-block;
}
#product-image {
width: 400px;
height: 40%;
min-width: 40%;
min-height: 40%;
padding: 20px;
}
.product-info {
display: inline-block;
padding: 10px;
margin: 10px;
}
#product-name {
font-size: 25px;
text-transform: uppercase;
text-align: left;
}
#product-price {
font-size: 20px;
padding: 20px 0px;
text-align: left;
}
.product-info hr {
width: 278px;
opacity: 0.4;
}
#product-sizes {
padding: 5px;
text-align: center;
text-transform: uppercase;
width: fit-content;
}
#size-radio-btn {
display: inline-block;
width: 40px;
height: 40px;
text-align: center;
font-size: 15px;
border: 1px solid black;
margin: 5px 10px;
margin-left: 5px;
margin-right: 5px;
line-height: 40px;
color: black;
cursor: pointer;
}
#add-to-cart {
width: 278px;
height: 40px;
margin: 0 5px;
cursor: pointer;
background-color: black;
color: white;
text-transform: uppercase;
font-size: 15px;
float: left;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<div class="content">
<div class="product">
<div class="product-view">
<img id="product-image" src="/Media/hoodieblack.png">
</div>
<div class="product-info">
<div id="product-name">
<h3>Hoodie - Black</h3>
</div>
<div id="product-price">
<p>$80.00</p>
</div>
<hr>
<div id="product-sizes">
<label for="size-select">Size</label>
<div id="size-select">
<input type="radio" name="size" value="s" hidden id="s-size">
<label for="s-size" id="size-radio-btn">S</label>
<input type="radio" name="size" value="m" hidden id="m-size">
<label for="m-size" id="size-radio-btn">M</label>
<input type="radio" name="size" value="l" hidden id="l-size">
<label for="l-size" id="size-radio-btn">L</label>
<input type="radio" name="size" value="xl" hidden id="xl-size">
<label for="xl-size" id="size-radio-btn">XL</label>
<input type="radio" name="size" value="xxl" hidden id="xxl-size">
<label for="xxl-size" id="size-radio-btn">XXL</label>
</div>
</div>
<button type="button" id="add-to-cart">Add to Cart</button>
</div>
</div>
</div>
</body>
</html>
Simply add display: flex; to the main parent, in this case, .product. Then you can use align-items: center; to get them in line with one another.
You can also add max-width: 100%; to the image so it resizes accordingly.
* {
margin: 0px;
padding: 0px;
}
.product {
text-align: center;
}
.product-view {
top: 40px;
padding: 10px;
margin: 10px;
display: inline-block;
}
#product-image {
width: 400px;
height: 40%;
min-width: 40%;
min-height: 40%;
padding: 20px;
}
.product-info {
display: inline-block;
padding: 10px;
margin: 10px;
}
#product-name {
font-size: 25px;
text-transform: uppercase;
text-align: left;
}
#product-price {
font-size: 20px;
padding: 20px 0px;
text-align: left;
}
.product-info hr {
width: 278px;
opacity: 0.4;
}
#product-sizes {
padding: 5px;
text-align: center;
text-transform: uppercase;
width: fit-content;
}
#size-radio-btn {
display: inline-block;
width: 40px;
height: 40px;
text-align: center;
font-size: 15px;
border: 1px solid black;
margin: 5px 10px;
margin-left: 5px;
margin-right: 5px;
line-height: 40px;
color: black;
cursor: pointer;
}
#add-to-cart {
width: 278px;
height: 40px;
margin: 0 5px;
cursor: pointer;
background-color: black;
color: white;
text-transform: uppercase;
font-size: 15px;
}
.product {
display: flex;
align-items: center;
justify-content: center;
}
#product-image {
max-width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<div class="content">
<div class="product">
<div class="product-view">
<img id="product-image" src="https://dummyimage.com/800/000/fff">
</div>
<div class="product-info">
<div id="product-name">
<h3>Hoodie - Black</h3>
</div>
<div id="product-price">
<p>$80.00</p>
</div>
<hr>
<div id="product-sizes">
<label for="size-select">Size</label>
<div id="size-select">
<input type="radio" name="size" value="s" hidden id="s-size">
<label for="s-size" id="size-radio-btn">S</label>
<input type="radio" name="size" value="m" hidden id="m-size">
<label for="m-size" id="size-radio-btn">M</label>
<input type="radio" name="size" value="l" hidden id="l-size">
<label for="l-size" id="size-radio-btn">L</label>
<input type="radio" name="size" value="xl" hidden id="xl-size">
<label for="xl-size" id="size-radio-btn">XL</label>
<input type="radio" name="size" value="xxl" hidden id="xxl-size">
<label for="xxl-size" id="size-radio-btn">XXL</label>
</div>
</div>
<button type="button" id="add-to-cart">Add to Cart</button>
</div>
</div>
</div>
</body>
</html>
Trying to figure out how to align some buttons to some input fields and it's tricky as hell. I couldn't figure it out.
I've found a lot of things online:
Align button to input with float?
Align button with input forms with labels
Make form button/text field same height in all browsers?
I know I will get a lot of minuses but I just can't get my head around this and I need help.
I've lost a whole day modifying values and I have no clue on how to position things in CSS. I can't understand it.
.big-box {
position: absolute;
width: 60%;
top: 40%;
left: 50%;
text-align: left;
transform: translate(-50%, -50%);
text-align: center;
}
.box-head {
width: 100%;
display: grid;
border-bottom: 6px solid red;
margin-bottom: 50px;
margin-top: 40px;
text-align: center;
}
.textbox {
display: block;
float: left;
width: 75%;
overflow: hidden;
font-size: 20px;
padding: 5px 0;
margin: 10px 0;
border-bottom: 1px solid red;
}
.textbox input {
border: none;
outline: none;
background: none;
color: white;
font-size: 18px;
width: 97%;
float: left;
margin: 5px 5px;
}
#button {
display: grid;
width: 25%;
background: none;
border: 2px solid red;
color: white;
padding: 5px;
font-size: 18px;
cursor: pointer;
}
<div id="logo"><img url="logo.png"></div>
<div class="big-box">
<div class="box-head">
<div class="title">
<h1>Configuration Page</h1>
</div>
</div>
<form method="post" action="/url" onSubmit="return saveValue();">
<div class="textbox">
<input type="url" placeholder="Enter URL" name="getURL" value="">
</div>
<input id="button" type="submit" value="Enter">
<div class="textbox">
<input type="number" placeholder="Brightness" name="getBrightness" value="">
</div>
<input id="button" type="submit" value="Enter">
</form>
</div>
EDIT: This is how I've fixed it:
I've changed from class to ID: #textbox;
I've put #textbox and #button inside div: #box-box;
I've added display: flex; to #box-box and display: grid; to
both #textbox and #button.
Added margin-left: 25px; to #button;
Here is the result.
Thanks #Flavio Caruso for the inspiration.
<body>
<div id = "logo"><img url="logo.png"></div>
<div class = "big-box">
<div class = "box-head">
<div class = "title"><h1>Configuration Page</h1></div>
</div>
<form method="post" action="/url">
<div id="box-box">
<div id = "textbox" >
<input type="url" placeholder="Enter URL" name="getURL" value="">
</div>
<input id ="button" type="submit" value="Enter">
</div>
<div id="box-box">
<div id = "textbox" >
<input type="url" placeholder="Enter URL" name="getURL" value="">
</div>
<input id ="button" type="submit" value="Enter">
</div>
<div id="box-box">
<div id = "textbox" >
<input type="url" placeholder="Enter URL" name="getURL" value="">
</div>
<input id ="button" type="submit" value="Enter">
</div>
</form>
</div>
</body>
#logo {
width: 94%;
height: 50px;
background: url(logo.png) left no-repeat;
background-size:contain;
margin: 30px auto;
}
**#box-box {
display:flex;
}**
#textbox {
**display: grid;**
width: 70%;
overflow: hidden;
font-size: 20px;
padding 10px 0;
margin: 10px 0;
border-bottom: 1px solid red;
}
#textbox input {
border: none;
outline: none;
background: none;
color: white;
font-size: 18px;
width: 97%;
float: left;
margin: 5px 5px;
}
#button {
**display: grid;**
width: 25%;
background: none;
border: 2px solid red;
color: white;
padding: 5px;
font-size: 18px;
cursor: pointer;
margin: 10px 0;
**margin-left: 25px;**
margin-top: 30px;
}
There is a few changes you have to do, you must insert the input button inside the div class 'textbox' and add a display:flex, then you ajust the css from button to inline-block and float right.
like that:
.big-box {
position: absolute;
width: 60%;
top: 40%;
left: 50%;
text-align: left;
transform: translate(-50%, -50%);
text-align: center;
}
.box-head {
width: 100%;
display: grid;
border-bottom: 6px solid red;
margin-bottom: 50px;
margin-top: 40px;
text-align: center;
}
.textbox {
display: flex;
float: left;
width: 75%;
overflow: hidden;
font-size: 20px;
padding: 5px 0;
margin: 10px 0;
border-bottom: 1px solid red;
}
.textbox input {
border: none;
outline: none;
background: none;
color: white;
font-size: 18px;
width: 97%;
margin: 5px 5px;
}
#button {
display: inline-block;
float: right;
width: 25%;
background: none;
border: 2px solid red;
color: white;
padding: 5px;
font-size: 18px;
cursor: pointer;
}
<body>
<div id = "logo"><img url="logo.png"></div>
<div class = "big-box">
<div class = "box-head">
<div class = "title"><h1>Configuration Page</h1></div>
</div>
<form method="post" action="/url" onSubmit="return saveValue();">
<div class = "textbox" >
<input type="url" placeholder="Enter URL" name="getURL" value="">
<input id ="button" type="submit" value="Enter">
</div>
<div class = "textbox" >
<input type="number" placeholder="Brightness" name="getBrightness" value="">
<input id ="button" type="submit" value="Enter">
</div>
</form>
</div>
</body>
I've been trying to replicate this page https://vk.com/ You can see that they've changed the standard appearance of radio buttons in the 2nd form.
I succeeded in changing the design of the buttons but now they are all checked simultaneously.
HTML
<form class="form2">
<div class="heading">
<h2>Poprvé na VK?</h2>
<p>Okamžitá registrace</p>
</div>
<input type="text" placeholder="Vaše jméno" required>
<input type="text" placeholder="Vaše příjmení" required class="last-name">
<label class="birth">
<span>Datum narození
<i class="fa fa-question-circle-o"
aria-hidden="true"></i></span>
<input type="date" class="date" required>
</label>
<label>
<span class="gender-head">Pohlaví</span>
<div class="gender">
<input type="radio" id="1-option" name="selector" value="female" class="control">
<div class="button"></div>Žena
<input type="radio" id="2-option" name="selector" value="male" class="control">
<div class="button"></div>Muž
<input type="radio" id="3-option" value="other" name="selector" class="control">
<div class="button"></div>Jiné
</div>
</label>
<button type="submit">Zaregistrovat se</button>
<a href="#">
<i class="fa fa-facebook-square" aria-hidden="true"></i> Přihlásit se přes Facebook</a>
</form>
CSS
form {
width: 290px;
background-color: #fff;
padding: 20px 15px;
float: right;
border: 1px solid #E0E1E3;
font-size: 13px;
border-radius: 3px;
}
.form2 {
margin-right: 10px;
clear: right;
height: 380px;
display: flex;
flex-flow: row wrap;
color: #333436;
justify-content: center;
}
.form2 .heading {
flex-wrap: wrap;
margin: 0 auto;
}
.form2 h2 {
margin-top: 0px;
margin-bottom: 0px;
font-size: 20px;
font-weight: 100;
}
.form2 p {
font-size: 12px;
margin: 2px 0 0 9px;
}
.form2 input {
height: 30px;
border-radius: 3px;
border: 1px solid #DBDCDE;
width: 270px;
margin-top: -15px;
margin-bottom: 0;
}
.form2 .last-name {
margin-top: -15px;
}
.form2 span {
font-weight: 600;
margin-top: -50px;
color: #7A7B7D;
font-size: 13px;
}
.form2 .birth {
margin: -15px 0 0 10px;
}
.form2 .date {
margin-top: 10px;
margin-bottom: -100px;
}
.form2 .gender-head {
margin-left: -10px;
margin-bottom: 20px;
}
.gender {
display: flex;
width: 260px;
margin: 15px 0 0px -10px;
justify-content: space-between;
font-size: 13px;
color: #000;
}
.gender input[type="radio"] {
position: absolute;
top: -9999px;
left: -9999px;
}
.gender .button {
border: 1px solid #A3A4A6;
background: #fff;
border-radius: 50%;
height: 12px;
width: 12px;
margin-top: 2px;
margin-right: -40px;
}
.gender .button:hover {
cursor: pointer;
background-color: #EAEBED;
}
.gender .button::before {
display: block;
content: '';
height: 6px;
width: 6px;
border-radius: 50%;
}
input[type="radio"]:checked ~ .button {
border: 1px solid #5A7CA3;
}
input[type="radio"]:checked ~ .button::before {
background: #5A7CA3;
margin: 3px 2px 2px 3px;
}
::-webkit-input-placeholder {
color: #7A7B7D;
padding-left: 12px;
}
.form2 button {
height: 20px;
}
http://jsfiddle.net/Skidle/u3zj66sd/
I haven't learned JavaScript yet so I'd prefer CSS & HTML only solution. Thanks!
If you look at the radio buttons, by removing the position, you can see that only one is selected, and it is correct for each selection:
The problem lies in the way the presentation works. The CSS code:
input[type="radio"]:checked ~ .button::before // Is wrong.
input[type="radio"]:checked + .button::before // Is right.
Explanation
The code given for the CSS, ~ selector is a sibling selector, which selects all the selectors.
While, what you need is the + selector, which is the immediate or adjacent sibling selector. This selects only one.
Change needs to be done here:
input[type="radio"]:checked + .button::before {
background: #5A7CA3;
margin: 3px 2px 2px 3px;
}
Fiddle: http://jsfiddle.net/0rqu3s2c/
Note: There's an issue when you try to click on the other inputs. So, you might need to check what's blocking it. Please do not use absolute positioning without the desired result.
When I try to add float left or display inline, things break. Currently, I have a max-width of 1000px for the form. What I was hoping is somehow, the first, and last name will automatically float side by side if it is wide enough. So perhaps a min-width for inputs First and Last name?
Important note: I wrote this to test out writing CSS DRY code. You notice if you change the font size, the whole project changes size, So this is important to me. Also, I do not want to use media queries.
I am aware that I may need to change my approach, and I am open to that as well. Not so much looking for an exact code answer.
form {
text-align: center;
}
form ul, form li, form input, form label {
box-sizing: border-box;
margin: 0; padding: 0;
}
form ul {
font-size: 100%;
border: 3px solid #000;
border-radius: .3em;
max-width: 1000px;
margin: 50px auto;
list-style: none;
overflow: hidden;
}
form li {
position: relative;
border-bottom: inherit;
border-bottom: 3px solid;
}
form label {
position: absolute;
border-bottom: 1px dotted;
border-bottom-color: inherit;
width: 100%;
padding: .3em .3em;
padding-bottom: .1em;;
top: 0; left: 0;
font-size: .6em;
text-transform: uppercase;
}
form input, form input:focus {
text-transform: capitalize;
text-align: inherit;
background: transparent;
border: none;
width: 100%;
font-size: 2em;
padding: .7em .1em;
padding-bottom: .2em;;
}
form input:focus {
background-color: rgba(255, 255, 0, .2);
}
form input[type="submit"] {
text-transform: uppercase;
padding-bottom: 1.8em;
font-size: .6em;
height: 1.5em;
background-color: #ddd;
}
<form action="">
<ul>
<li>
<input id="first-name" type="text" autofocus>
<label for="first-name">First Name</label>
</li>
<li>
<input id="last-name" type="text">
<label for="last-name">Last Name</label>
</li>
<li>
<input id="username" type="text">
<label for="username">Username</label>
</li>
<li>
<input type="submit" name="submit">
</li>
</ul>
</form>
Flexbox is the most modern solution to this problem. However, remember to add the necessary prefixes for some browsers. If IE9 support is necessary, see the float solution below:
HTML
<form action="">
<ul>
<li class="split">
<input id="first-name" type="text" autofocus>
<label for="first-name">First Name</label>
</li>
<li class="split">
<input id="last-name" type="text">
<label for="last-name">Last Name</label>
</li>
<li class="fill">
<input id="username" type="text">
<label for="username">Username</label>
</li>
<input type="submit" name="submit">
</ul>
</form>
CSS
form {
text-align: center;
}
form ul, form li, form input, form label {
box-sizing: border-box;
margin: 0; padding: 0;
}
form ul {
font-size: 100%;
border: 3px solid #000;
border-radius: .3em;
max-width: 1000px;
margin: 50px auto;
list-style: none;
overflow: hidden;
}
form li {
position: relative;
border-bottom: inherit;
border-bottom: 3px solid;
}
form label {
position: absolute;
border-bottom: 1px dotted;
border-bottom-color: inherit;
width: 100%;
padding: .3em .3em;
padding-bottom: .1em;;
top: 0; left: 0;
font-size: .6em;
text-transform: uppercase;
}
form input, form input:focus {
text-transform: capitalize;
text-align: inherit;
background: transparent;
border: none;
width: 100%;
font-size: 2em;
padding: .7em .1em;
padding-bottom: .2em;;
}
form input:focus {
background-color: rgba(255, 255, 0, .2);
}
form input[type="submit"] {
text-transform: uppercase;
padding-bottom: 1.8em;
font-size: .6em;
height: 1.5em;
background-color: #ddd;
}
#media only screen and (min-width: 768px) {
li {
clear: both;
}
li.split {
width: 50%;
float: left;
clear: none;
}
}
https://jsfiddle.net/qefo9eLr/
.fl-name {
display: flex;
flex-direction: row;
}
you can try to use bootstrap grid system
this way u can have the inputs into columns
bootstrap grid system
look at this fiddle:
gri system sample
<div class='row'>
<div class="col-xs-2">Hi</div>
<div class="col-xs-2">Hi</div>
in your case col-xs-6 will give you 2 columns fullwidth
Not exactly sure if this is what you're going for, but it seems to fit your criteria.
form {
text-align: center;
}
form ul,
form li,
form input,
form label {
box-sizing: border-box;
margin: 0;
padding: 0;
}
form ul {
font-size: 100%;
border: 3px solid #000;
border-radius: .3em;
max-width: 1000px;
margin: 50px auto;
list-style: none;
overflow: hidden;
}
form li {
position: relative;
border-bottom: inherit;
border-bottom: 3px solid;
}
form label {
position: absolute;
border-bottom: 1px dotted;
border-bottom-color: inherit;
width: 100%;
padding: .3em .3em;
padding-bottom: .1em;
;
top: 0;
left: 0;
font-size: .6em;
text-transform: uppercase;
}
form input,
form input:focus {
text-transform: capitalize;
}
form #fl-name {
display: inline-block;
}
form .floatMe {
float: left;
}
form .clearMe {
clear: right;
}
<form action="">
<ul>
<div class="fl-name">
<li class="floatMe">
<input id="first-name" type="text" autofocus>
<label for="first-name">First Name</label>
</li>
<li class="floatMe clearMe">
<input id="last-name" type="text">
<label for="last-name">Last Name</label>
</li>
</div>
<li>
<input id="username" type="text">
<label for="username">Username</label>
</li>
<input type="submit" name="submit">
</ul>
</form>
Here is another alternative using our old faithful floats: https://jsfiddle.net/mvpu6s5o/3/
The main difference is basically here:
form li {
width: 33.33%;
float: left;
}
form li:nth-child(3) {
float: right;
}
form li:last-child {
width: 100%;
clear: both;
}
I used a width with percentage to keep it fluid, so it'll adjust to different screen sizes. The li:nth-child(3) float the last input to the right, so we can get rid of a small gap at the end due to the 33.33% width. form li:last-child is used to clear both floats to the last input (since this too is an li).
I just change the semantic and apply flexbox. This is the result:
*, *:before, *:after {
box-sizing: inherit;
margin: 0;
padding: 0;
}
body {
align-items: center;
/background-color: #EB6361;
display: flex;
height: 100vh;
justify-content: center;
}
form {
box-shadow: 0 0 0 8px rgba(204,204,204,.85);
border-radius: 5px;
width: 500px;
}
form header {
background-color: #1ABC9C;
}
form header p {
color: #FFF;
font-family: 'ubuntu';
font-size: 15px;
padding: 15px 10px;
text-align: center;
}
form .body {
background-color: #EEE;
padding: 15px 20px;
}
form .body .block {
border: 2px solid #333;
border-radius: 4px;
overflow: hidden;
}
form .body .block:not(first-of-type) {
margin-top: 10px;
}
form .body .block:first-of-type > .group {
width: 98%;
}
form .body .block:first-of-type {
display: flex;
}
form .body .block .group {
display: flex;
flex-flow: column-reverse nowrap;
overflow: hidden;
}
form .body .block:first-of-type .group:first-of-type {
border-right: 2px solid #333;
}
form input {
background-color: transparent;
border: none;
color: #555;
font-size: 22pt;
padding: 6px 10px;
text-align: center;
}
form input:focus, form input:focus + label {
background-color: #F7F8E0;
}
form label {
border-bottom: 1px dotted #bbb;
color: #555;
font-family: 'ubuntu';
font-size: 11px;
padding: 2px;
text-align: center;
text-transform: uppercase;
}
form footer {
overflow: hidden;
}
form footer button {
background-color: #F39C12;
color: #FFF;
cursor: pointer;
width: 100%;
border: none;
padding: 4px;
}
<form action="">
<header>
<p>Submit Query Form</p>
</header>
<section class="body">
<div class="block">
<div class="group">
<input type="text" />
<label for="">First Name</label>
</div>
<div class="group">
<input type="text" />
<label for="">Last Name</label>
</div>
</div>
<div class="block">
<div class="group">
<input type="text" />
<label for="">Username</label>
</div>
</div>
</section>
<footer>
<button>Submit query</button>
</footer>
</form>
A very simple solution is with Flexbox.
Set the parent element to display type 'flex'.
Also set up flex wrap: wrap // This way the children will wrap if needed.
The children become flex objects. Since I want them to be even, I set them both to flex grow: 1
Set the children to flex-basis as 300px. // This is almost like a minimum width. This triggers the wrap.
body {
padding: 50px;
}
.main {
background-color: #e9e9e9;
display: flex;
flex-wrap: wrap;
}
.main input {
background-color: #e9e9e9;
}
.one {
flex-grow: 1;
flex-basis: 300px
}
.two {
flex-grow: 1;
flex-basis: 300px;
}
<head>
<link rel="stylesheet" href="inline.css">
</head>
<body>
<form class="main">
<input type="text" class="one">
<input type="text" class="two">
</form>
</body>