I need to make the button and submit input type in 1 line and dont know how to do it.
I tried by changing display to inline but it doesnt work.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Animated Login</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<form class ="box" action = "index.html" method="post">
<h1>Login</h1>
<input type="username" name="" placeholder="Username">
<input type="password" name="" placeholder="Passeword">
<input type="submit" name="" value="Login">
<input type="button" name="" value="Register">
</form>
</body>
</html>
body{
margin: 0;
padding: 0;
font-family: sans-serif;
background: #34495e;
}
.box{
width: 300px;
padding: 40px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #191919;
text-align: center;
}
.box h1{
color: white;
text-transform: uppercase;
font-weight: 500;
}
.box input[type = "username"],.box input[type = "password"]{
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #3498db;
padding: 14px 10px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
}
.box input[type = "username"]:focus,.box input[type = "password"]:focus{
width: 280px;
border-color: #2ecc71;
}
.box input[type = "submit"]{
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
}
.box input[type = "submit"]:hover{
background: #2ecc71;
}
.box input[type = "button"]{
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
}
.box input[type = "button"]:hover{
background: #2ecc71;
}
At first try to make your question readable. Follow the rules here https://stackoverflow.com/help/how-to-ask.
I am assuming you need col-md-6 from bootstrap. Try this-
<div class='col-md-6'>
<input type="submit" name="" value="Login">
</div>
<div class='col-md-6'>
<input type="button" name="" value="Register">
</div>
You just need to remove display: block property from both of your button style and give width to the form of width:450px will make button side by side to each other, it is necassary to have form width of 450px other wise width lesser than 450px will make button one after another and will not make side by side.
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background: #34495e;
}
.box {
width: 450px;
padding: 40px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #191919;
text-align: center;
}
.box h1 {
color: white;
text-transform: uppercase;
font-weight: 500;
}
.box input[type="username"],
.box input[type="password"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #3498db;
padding: 14px 10px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
}
.box input[type="username"]:focus,
.box input[type="password"]:focus {
width: 280px;
border-color: #2ecc71;
}
.box input[type="submit"] {
border: 0;
background: none;
margin: 20px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
}
.box input[type="submit"]:hover {
background: #2ecc71;
}
.box input[type="button"] {
border: 0;
background: none;
margin: 20px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
}
.box input[type="button"]:hover {
background: #2ecc71;
}
<form class="box" action="index.html" method="post">
<h1>Login</h1>
<input type="username" name="" placeholder="Username">
<input type="password" name="" placeholder="Passeword">
<input type="submit" name="" value="Login">
<input type="button" name="" value="Register">
</form>
Related
I am unable to make this login form responsive. it looks awesome in desktop
I've made this using html and CSS.it looks like the problem is with width or height on opening this on small devices
I've tried using overflow:hidden;
#media width
but it did not worked
I want this to be reponsive as the view of desktop
here's the code
html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Login Form</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="center">
<h1>Login</h1>
<form method="post">
<div class="txt_field">
<input type="text" required>
<span></span>
<label>Username</label>
</div>
<div class="txt_field">
<input type="password" required>
<span></span>
<label>Password</label>
</div>
<div class="pass">Forgot Password ? </div>
<input type="submit" value="Login">
<div class="signup_link"><span id="extext">
</span>Not a member? Signup
</div>
</form>
</div>
</body>
</html>
CSS code
*{
margin: 0;
padding: 0;
font-family: "Poppins", sans-serif;
/* font-weight: bold; */
}
body{
margin: 0;
padding: 0;
background: linear-gradient(120deg,#4e718a, #3e9778);
height: 100vh;
overflow: hidden;
}
.center{
position: relative;
top: 50%;
left: 50%;
right: 50%;
transform: translate(-50%, -50%);
height: 459px;
width: 359px;
background: linear-gradient(120deg,#9b3438ce, #8f21a7e8);;
border-radius: 10px;
box-shadow: 10px 10px 15px rgb(56 45 45 / 84%);
}
#media (max-width: 920px) {
.center{
display:block;
position:relative;
height: 76vh;
width: 70vw;
}
}
.center h1{
text-align: center;
padding: 20px 0;
border-bottom: 3px solid #93c398;
}
.center form{
padding: 0 40px;
box-sizing: border-box;
}
form .txt_field{
position: relative;
border-bottom: 2px solid #adadad;
margin: 30px 0;
}
.txt_field input{
width: 100%;
padding: 0 5px;
height: 40px;
font-size: 16px;
border: none;
background: none;
outline: none;
}
.txt_field label{
position: absolute;
top: 50%;
left: 5px;
color: #a4a2a2;
transform: translateY(-40%);
font-size: 16px;
transition: .7s;
}
.txt_field span::before{
content: '';
position: absolute;
top: 40px;
left: 0;
width: 0%;
height: 2px;
background: #0a8eb6;
transition: .7s;
}
.txt_field input:focus ~ label,
.txt_field input:valid ~ label{
top: -5px;
color: 0a8eb6;
}
.txt_field input:focus ~ span::before,
.txt_field input:valid ~ span::before{
width: 100%;
}
.pass a{
text-decoration: none!important;
color: #d1dcdc;
}
.pass a:hover{
text-decoration: none!important;
font-size: 17.8px;
font-weight: 80px;
}
.pass{
text-align:right;
font-size:17px;
margin: -5px 0 15px;
}
input[type="submit"]{
width: 100%;
height: 50px;
border: 1px solid;
background: #2691d9;
border-radius: 25px;
font-size: 18px;
color: #e9f4fb;
font-weight: 700;
cursor: pointer;
outline: none;
}
input[type="submit"]:hover{
border-color: #2691d9;
transition: .5s;
}
.signup_link{
margin: 30px 0;
text-align: center;
font-size: 16px;
color: #666666;
}
.signup_link a{
color: #a6a4a4;
text-decoration: none;
}
.signup_link a:hover{
text-decoration: underline;
color: #b2afaf;
font-size:17.8px;
}
.txlog{
font-size:17px;
}
.txlog:hover{
color: rgb(118, 145, 136);
font-size: 16.7px;
font-weight: 80px;
}
I've created this simple Login form for a uni project and for some reason the box around the text field is still showing, I want it to be invisible.
How the form works is; when a user clicks on either field, the placeholder lifts up and they type below it (refer to screenshot)
For some reason, however, the text box is still there.
Any help would be greatly appreciated.
.center {
position:fixed;
top: 40%;
left: 70%;
transform: translate(-50%, -50%);
width: 720px;
height: 350px;
background: linear-gradient(180deg, white, silver );
size: 100%;
border-style: solid;
border-color: black;
border-width: 1px;
}
.center h1{
text-align: center;
padding: 0 0 20px 0;
border-bottom: 1px solid silver;
}
.center form {
padding: 0 40px;
}
form .txt_field {
position: relative;
border-bottom: 2px solid #adadad;
margin: 30px 0;
}
.txt-field input {
width: 100%;
padding: 0 5px;
height: 40px;
font-size: 16px;
border: none;
background: none;
outline: none;
}
.no-outlin:focus{
outline: none;
}
.txt_field label{
position: absolute;
top: 50%;
left: 5px;
color: #adadad;
transform: translateY(-50%);
font-size: 16px;
pointer-events: none;
transition: .7s;
border: none;
}
.txt_field span::before{
content: '';
position: absolute;
top: 40px;
left: 0;
width: 0%;
height: 2px;
background: #2691d9;
transition: .7s;
}
.txt_field input:focus ~ label,
.txt_field input:valid ~ label {
top: -5px;
color: #2691d9;
}
.txt_field input:focus ~ span::before,
.txt_field input:valid ~ span::before {
width: 100%;
}
.pass {
margin: -5px 0 20px 5px;
color: #a6a6a6;
cursor: pointer;
}
.pass:hover {
text-decoration: underline;
}
input[type="submit"]{
width: 100%;
height: 50px;
border: 1px solid;
background: #2691d9;
border-radius: 25px;
font-size: 18px;
color: #e9f4fb;
font-weight: 700;
cursor: pointer;
outline: none;
}
input[type="submit"]:hover{
border-color: #2691d9;
transition: .5s;
}
.signup_link {
margin: 30px;
text-align: center;
font-size: 16px;
color: #666666;
}
.signup_link a{
color: #2691d9;
text-decoration: none;
}
.signup_link a:hover{
color: #2691d9;
text-decoration: underline;
}
<head>
</head>
<body class="Body">
<div class="center">
<h1> Login </h1>
<form method="post" class="Box">
<div class="txt_field">
<input type="text" required>
<span></span>
<label>Username</label>
</div>
<div class="txt_field">
<input type="password" required>
<span></span>
<label>Password</label>
</div>
<div class="pass"> Forgotten Password? </div>
<input type="submit" value="Login">
<div class="signup_link">
Not a Member? <a class="nav-item-nav-link" routerLink="/register">Create an Account!</a>
</div>
</form>
</div>
Click here for sceenshot
There's a typo in your CSS
Change the txt-field in your CSS to txt_field
This is your code:
.center {
position: fixed;
top: 40%;
left: 70%;
transform: translate(-50%, -50%);
width: 720px;
height: 350px;
background: linear-gradient(180deg, white, silver);
size: 100%;
border-style: solid;
border-color: black;
border-width: 1px;
}
.center h1 {
text-align: center;
padding: 0 0 20px 0;
border-bottom: 1px solid silver;
}
.center form {
padding: 0 40px;
}
form .txt_field {
position: relative;
border-bottom: 2px solid #adadad;
margin: 30px 0;
}
.txt_field input {
width: 100%;
padding: 0 5px;
height: 40px;
font-size: 16px;
border: none;
background: none;
outline: none;
}
.no-outlin:focus {
outline: none;
}
.txt_field label {
position: absolute;
top: 50%;
left: 5px;
color: #adadad;
transform: translateY(-50%);
font-size: 16px;
pointer-events: none;
transition: .7s;
border: none;
}
.txt_field span::before {
content: '';
position: absolute;
top: 40px;
left: 0;
width: 0%;
height: 2px;
background: #2691d9;
transition: .7s;
}
.txt_field input:focus~label,
.txt_field input:valid~label {
top: -5px;
color: #2691d9;
}
.txt_field input:focus~span::before,
.txt_field input:valid~span::before {
width: 100%;
}
.pass {
margin: -5px 0 20px 5px;
color: #a6a6a6;
cursor: pointer;
}
.pass:hover {
text-decoration: underline;
}
input[type="submit"] {
width: 100%;
height: 50px;
border: 1px solid;
background: #2691d9;
border-radius: 25px;
font-size: 18px;
color: #e9f4fb;
font-weight: 700;
cursor: pointer;
outline: none;
}
input[type="submit"]:hover {
border-color: #2691d9;
transition: .5s;
}
.signup_link {
margin: 30px;
text-align: center;
font-size: 16px;
color: #666666;
}
.signup_link a {
color: #2691d9;
text-decoration: none;
}
.signup_link a:hover {
color: #2691d9;
text-decoration: underline;
}
<head>
</head>
<body class="Body">
<div class="center">
<h1> Login </h1>
<form method="post" class="Box">
<div class="txt_field">
<input type="text" required>
<span></span>
<label>Username</label>
</div>
<div class="txt_field">
<input type="password" required>
<span></span>
<label>Password</label>
</div>
<div class="pass"> Forgotten Password? </div>
<input type="submit" value="Login">
<div class="signup_link">
Not a Member? <a class="nav-item-nav-link" routerLink="/register">Create an Account!</a>
</div>
</form>
</div>
target the input not thee div
.center {
position: fixed;
top: 40%;
left: 70%;
transform: translate(-50%, -50%);
width: 720px;
height: 350px;
background: linear-gradient(180deg, white, silver);
size: 100%;
border-style: solid;
border-color: black;
border-width: 1px;
}
.center h1 {
text-align: center;
padding: 0 0 20px 0;
border-bottom: 1px solid silver;
}
.center form {
padding: 0 40px;
}
form .txt_field {
position: relative;
border-bottom: 2px solid #adadad;
margin: 30px 0;
}
.txt_field input:focus {
outline: none;
}
.no-outlin:focus {
outline: none;
}
.txt_field label {
position: absolute;
top: 50%;
left: 5px;
color: #adadad;
transform: translateY(-50%);
font-size: 16px;
pointer-events: none;
transition: .7s;
border: none;
}
.txt_field span::before {
content: '';
position: absolute;
top: 40px;
left: 0;
width: 0%;
height: 2px;
background: #2691d9;
transition: .7s;
}
.txt_field input:focus~label,
.txt_field input:valid~label {
top: -5px;
color: #2691d9;
}
.txt_field input:focus~span::before,
.txt_field input:valid~span::before {
width: 100%;
}
.pass {
margin: -5px 0 20px 5px;
color: #a6a6a6;
cursor: pointer;
}
.pass:hover {
text-decoration: underline;
}
input[type="submit"] {
width: 100%;
height: 50px;
border: 1px solid;
background: #2691d9;
border-radius: 25px;
font-size: 18px;
color: #e9f4fb;
font-weight: 700;
cursor: pointer;
outline: none;
}
input[type="submit"]:hover {
border-color: #2691d9;
transition: .5s;
}
.signup_link {
margin: 30px;
text-align: center;
font-size: 16px;
color: #666666;
}
.signup_link a {
color: #2691d9;
text-decoration: none;
}
.signup_link a:hover {
color: #2691d9;
text-decoration: underline;
}
<head>
</head>
<body class="Body">
<div class="center">
<h1> Login </h1>
<form method="post" class="Box">
<div class="txt_field">
<input type="text" required>
<span></span>
<label>Username</label>
</div>
<div class="txt_field">
<input type="password" required>
<span></span>
<label>Password</label>
</div>
<div class="pass"> Forgotten Password? </div>
<input type="submit" value="Login">
<div class="signup_link">
Not a Member? <a class="nav-item-nav-link" routerLink="/register">Create an Account!</a>
</div>
</form>
</div>
I'm trying fix the Log-In & registration form. When you click on "Register" on my menu, you can see that the labels are perfectly formatted in the form but the input box are offset. I tried to fix it with float:left but it didn't work out too well. If somebody could help me with that, that would be awesome.
var popup = document.getElementById('id01');
var popupreg = document.getElementById('id02');
window.onclick = function(event) {
if (event.target == popup) {
popup.style.display = "none";
}
if (event.target == popupreg) {
popupreg.style.display = "none";
}
}
body {
margin: 0 auto;
background: #fff;
}
div.container {
text-align: center;
box-sizing: border-box;
margin: 0 auto;
padding: 5px;
background-color: #000;
}
a.nounderline span {
color: #00B200;
}
.main-menu {
width: 200px;
margin: 0 auto;
right: 26px;
position: fixed;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
height: 35%;
}
.floating-sidebar li {
text-decoration: none;
outline: none;
line-height: 2em;
display: block;
border-radius: auto;
position: relative;
top: 10px;
-webkit-transition: none;
-o-transition: none;
transition: none;
}
.floating-sidebar li a {
background-color: #fff;
color: #444950;
display: block;
padding: 7px;
text-decoration: none;
font-family: Arial, sans-serif;
font-size: 18;
font-weight: bold;
border-radius: 9px;
}
.floating-sidebar li a:hover {
background-color: #eee;
color: #00B200;
}
.floating-sidebar li a.active {
background-color: #eee;
color: #00B200;
}
.floating-sidebar:hover li a.register-link {
color: #b5e7a0;
background: #fff;
}
.floating-sidebar li a.active:hover {
background-color: #00B200;
color: #fff;
}
.topnav input[type=text] {
float: left;
padding: 4.5px;
padding-left: 28px;
width: 305px;
border: 2px solid #00B200;
border-radius: 18px;
outline: inherit;
margin-top: 80px;
margin-left: 115px;
font-family: Arial, sans-serif;
font-weight: bold;
font-size: 18px;
direction: inherit;
}
input::placeholder {
color: #BEBEBE;
}
span.topnav {
right: 50px;
}
.sortby-box {
padding-top: 124px;
padding-left: 44;
margin: 0 auto;
position: fixed;
}
.select-opt {
padding: 4px;
width: 120px;
border-radius: 8px;
outline: none;
border: 1px solid #00B200;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
.select-opt option {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
.popup,
.popupreg {
display: none;
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.8);
/* Black w/ opacity */
padding-top: 60px;
}
.popup-content,
.popupreg-content {
float: left;
position: fixed;
background-color: rgb(245, 245, 245);
width: 600px;
height: 400px;
border-radius: 39px;
left: 666px;
top: 210px;
border: 2px solid rgb(109, 196, 109);
}
.popup,
.popupreg label {
font-family: Arial, Helvetica, sans-serif;
}
.popup [type=text],
[type=password] {
padding: 6px 8px;
width: 250px;
border-radius: 12px;
border: 1px solid gray;
outline: none;
margin: 10px 0;
margin-left: 15px;
box-sizing: border-box;
}
.popupreg [type=text],
[type=password] {
padding: 6px 8px;
width: 250px;
border-radius: 12px;
border: 1px solid gray;
outline: none;
margin: 10px 0;
margin-left: 15px;
box-sizing: border-box;
}
.popup input[type=submit] {
padding: 8px;
border-radius: 12px;
border: 1px solid gray;
outline: none;
}
.popupreg input[type=submit] {
padding: 8px;
border-radius: 12px;
border: 1px solid gray;
outline: none;
}
.popup [type=submit] {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
background-color: #fff;
color: #00B200;
font-size: 22px;
padding: 180px;
margin-left: 88px;
margin-top: 5px;
width: 250px;
height: 60px;
}
.popupreg [type=submit] {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
background-color: #fff;
color: #00B200;
font-size: 22px;
padding: 180px;
margin-left: 88px;
margin-top: 5px;
width: 250px;
height: 60px;
}
.popup .submit-log:hover {
color: #fff;
background-color: #00B200;
cursor: pointer;
}
.popupreg .submit-log:hover {
color: #fff;
background-color: #00B200;
cursor: pointer;
}
.cancel {
text-align: right;
position: relative;
cursor: pointer;
}
.close {
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
.username-section,
.reg-section {
padding: 32px;
margin-left: 75px;
margin-top: 20px;
}
span.psswrd {
float: right;
padding-top: 16px;
}
#media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
<header>
<div class="container">
Hello
</div>
</header>
<main>
<aside>
</aside>
</main>
<sidebar>
<div class="main-menu">
<ul class="floating-sidebar">
<li>Log In</li>
<li>Register</li>
<li>About</li>
<li>Language</li>
</ul>
</div>
</sidebar>
<div class="sortby-box">
<select class="select-opt">
<option>Newest</option>
<option>Popularity</option>
<option>Recommended</option>
</select>
</div>
<div class="topnav">
<input style="position:relative;" type="text" name: "searchText" placeholder="Search here.." maxlength="18">
<span style="position:absolute; left: 126px; top: 119px;" class="fa fa-search icon"></span>
</div>
<div id="id01" class="popup">
<form class="popup-content" action="/action_page.php" method="get">
<div class="cancel">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
</div>
<div class="username-section">
<label for="usrname">Username</label>
<input type="text" id="usrname" name="usrname" minlength="6" maxlength="20"><br><br>
<label for="psswrd">Password</label>
<input type="password" id="passwrd" name="psswrd" minlength="6" maxlength="20"><br><br>
<input type="submit" class="submit-log" value="Log In">
</div>
</form>
</div>
<div id="id02" class="popupreg">
<form class="popupreg-content" action="/action_page.php" method="get">
<div class="cancel">
<span onclick="document.getElementById('id02').style.display='none'" class="close" title="Close Modal">×</span>
</div>
<div class="reg-section">
<label for="usrname">Username</label>
<input type="text" id="usrname" name="usrname" minlength="6" maxlength="20"><br><br>
<label for="usrname">Mail</label>
<input type="text" id="mail" name="mail" minlength="6" maxlength="20"><br><br>
<label for="psswrd">Password</label>
<input type="password" id="passwrd" name="psswrd" minlength="6" maxlength="20"><br><br>
<input type="submit" class="submit-log" value="Register">
</div>
</form>
</div>
<script src="index.js"></script>
<footer>
</footer>
A simple fix would be to give the label elements a display: inline-block; and give them a defined width such as width: 100px;.
I quickly created a JSFiddle to illustrate.
Hope this helped.
I am new to css so I cannot figure out the way of changing the color of pop up menus two buttons (Submit and Reset). Both of these are placed at the end of the pop up menu, but are not readable because of the color. I have used this code from this site and here the color of button is teal but in my code the button and text color is white and because of this I am unable to read the buttons.
I have tried changing the background color, text color in css but nothing is working
image
Current Image
Current image
I expect the button to be blue
```
.gbtn{
background: #d0d0d0;
color: #444444;
padding: 0 15px;
text-transform: uppercase;
height: 40px;
line-height: 40px;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
font-size: 12px;
}
.gbtn.btn-estimate{
padding:0 22px;
margin-top:7px;
}
.gbtn.btn-discount{
padding:0 26px;
}
.gbtn:hover{
background: #fbc443;
color: #25BCE9;
}
.gbtn:hover span{
color: #25BCE9;
}
.gbtn span{
display: inline-block;
}
button{
/* border:none;
background: #25BCE9;
color: #fff;
display: flex;
justify-content: flex-start;*/
}
#contactForm {
display: none;
z-index: 10000;
border: 3px solid #25BCE9;
padding: 2em;
width: 400px;
text-align: center;
background: #fff;
position: fixed;
top:50%;
left:50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%)
}
input{
height: 40px;
margin: .8em auto;
font-family: inherit;
text-transform: inherit;
font-size: inherit;
display: block;
width: 280px;
padding: .4em;
}
textarea {
height: 80px;
width:337px;
margin-right: 5px;
margin-bottom: 5px;
font-family: inherit;
text-transform: inherit;
font-size: inherit;
display: block;
padding: .4em;
resize: none;}
.formBtn {
display: inline-block;
background: teal;
color: #fff;
width: 140px;
font-weight: 100;
font-size: 1.2em;
padding: 5px 0;
border: none;
}
<div class="block-currency">
<div class="gbtn btn-estimate">
<div id="contact">Get Quote</div>
</div>
<div id="contactForm">
<h1>Keep in touch!</h1>
<small>We'll get back to you as quickly as possible</small>
<form action="#">
<input placeholder="Name" type="text" required />
<input placeholder="Email" type="email" required />
<input placeholder="Subject" type="text" required />
<textarea placeholder="Comment"></textarea>
<input class="formBtn" type="submit" />
<input class="formBtn" type="reset" />
</form>
</div>
</div>
Block Currency Code
.block-currency{
position:relative;
float:right;
cursor:pointer;
line-height:50px;
height:50px;
}
.block-currency:hover ul{
visibility:visible;
top:50px;
opacity:1;
transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
}
```
.gbtn{
background: #d0d0d0;
color: #444444;
padding: 0 15px;
text-transform: uppercase;
height: 40px;
line-height: 40px;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
font-size: 12px;
}
.gbtn.btn-estimate{
padding:0 22px;
margin-top:7px;
}
.gbtn.btn-discount{
padding:0 26px;
}
.gbtn:hover{
background: #fbc443;
color: #25BCE9;
}
.gbtn:hover span{
color: #25BCE9;
}
.gbtn span{
display: inline-block;
}
button{
/* border:none;
background: #25BCE9;
color: #fff;
display: flex;
justify-content: flex-start;*/
}
#contactForm {
z-index: 10000;
border: 3px solid #25BCE9;
padding: 2em;
width: 400px;
text-align: center;
background: #fff;
position: relative;
top:0%;
left:0%;
}
input{
height: 40px;
margin: .8em auto;
font-family: inherit;
text-transform: inherit;
font-size: inherit;
display: block;
width: 280px;
padding: .4em;
}
textarea {
height: 80px;
width:337px;
margin-right: 5px;
margin-bottom: 5px;
font-family: inherit;
text-transform: inherit;
font-size: inherit;
display: block;
padding: .4em;
resize: none;}
.formBtn {
display: inline-block;
background: teal;
color: #fff;
width: 140px;
font-weight: 100;
font-size: 1.2em;
padding: 5px 0;
border: none;
}
<div class="block-currency">
<div class="gbtn btn-estimate">
<div id="contact">Get Quote</div>
</div>
<div id="contactForm">
<h1>Keep in touch!</h1>
<small>We'll get back to you as quickly as possible</small>
<form action="#">
<input placeholder="Name" type="text" required />
<input placeholder="Email" type="email" required />
<input placeholder="Subject" type="text" required />
<textarea placeholder="Comment"></textarea>
<input class="formBtn" type="submit" />
<input class="formBtn" type="reset" />
</form>
</div>
</div>
The quickest and easiest way is to add IDs to the input elements:
<input id="submitButton"class="formBtn" type="submit" />
<input id="resetButton"class="formBtn" type="reset" />
and change their color by targeting directly:
#submitButton {
background: blue;
}
#resetButton {
background: blue;
}
I'm trying to create a login page in HTML.
no matter what i do, the checkbox and its text are not aliening together in a same line.
I want it to look like that: "[] text" instead of:
"[](going down a line) text".
I tried a lot of suggestions i saw in similar posts but nothing seems to works.
This is my code:
* {
box-sizing: border-box;
}
*:focus {
outline: none;
}
body {
font-family: Arial;
background-color: #3498DB;
padding: 50px;
}
.login {
margin: 20px auto;
width: 300px;
}
.login-screen {
background-color: #FFF;
padding: 20px;
border-radius: 5px
}
.app-title {
text-align: center;
color: #777;
}
.login-form {
text-align: center;
}
.control-group {
margin-bottom: 10px;
}
input {
text-align: center;
background-color: #ECF0F1;
border: 2px solid transparent;
border-radius: 3px;
font-size: 16px;
font-weight: 200;
padding: 10px 0;
width: 250px;
transition: border .5s;
}
input:focus {
border: 2px solid #3498DB;
box-shadow: none;
}
.btn {
border: 2px solid transparent;
background: #3498DB;
color: #ffffff;
font-size: 16px;
line-height: 25px;
padding: 10px 0;
text-decoration: none;
text-shadow: none;
border-radius: 3px;
box-shadow: none;
transition: 0.25s;
display: block;
width: 250px;
margin: 0 auto;
}
.btn:hover {
background-color: #2980B9;
}
.errorMsg{
font-size: 12px;
color: red;
}
.LabeledCheckboxGroup label, .LabeledCheckboxGroup input {
float: none; /* if you had floats before? otherwise inline-block will behave differently */
display: inline-block;
vertical-align: middle;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Login</title>
<!--<script src="script/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">-->
<link rel="stylesheet" type="text/css" href="css/Login.css">
</head>
<body>
<div class="login">
<div class="login-screen">
<div class="app-title">
<h1>Gridler</h1>
</div>
<div class="login-form">
<div class="control-group">
<input type="text" class="login-field" value="" placeholder="username" id="login-name">
<label class="login-field-icon fui-user" for="login-name"></label>
<input type="checkbox" checked name ="IsHuman"> Human Player
</div>
<a class="btn btn-primary btn-large btn-block" href="#" onclick="process()">login</a>
<!--errorMsg below will later be filed with script and ajax to show a msg when a name is already exist-->
<p class="errorMsg" href="#"></p>
</div>
</div>
</div>
</body>
</html>
Thanks,
Maor
Put the checkbox and its text inside a div.
Remove the width property from the checkbox.
Move the text into its own label.
set display: inline-block for both the checkbox and the label.
* {
box-sizing: border-box;
}
*:focus {
outline: none;
}
body {
font-family: Arial;
background-color: #3498DB;
padding: 50px;
}
.login {
margin: 20px auto;
width: 300px;
}
.login-screen {
background-color: #FFF;
padding: 20px;
border-radius: 5px
}
.app-title {
text-align: center;
color: #777;
}
.login-form {
text-align: center;
}
.control-group {
margin-bottom: 10px;
}
input {
text-align: center;
background-color: #ECF0F1;
border: 2px solid transparent;
border-radius: 3px;
font-size: 16px;
font-weight: 200;
width: auto;
padding: 10px 0;
transition: border .5s;
}
input:focus {
border: 2px solid #3498DB;
box-shadow: none;
}
.btn {
border: 2px solid transparent;
background: #3498DB;
color: #ffffff;
font-size: 16px;
line-height: 25px;
padding: 10px 0;
text-decoration: none;
text-shadow: none;
border-radius: 3px;
box-shadow: none;
transition: 0.25s;
display: block;
width: 250px;
margin: 0 auto;
}
.btn:hover {
background-color: #2980B9;
}
.errorMsg{
font-size: 12px;
color: red;
}
.LabeledCheckboxGroup label, .LabeledCheckboxGroup input {
float: none; /* if you had floats before? otherwise inline-block will behave differently */
display: inline-block;
vertical-align: middle;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Login</title>
<!--<script src="script/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">-->
<link rel="stylesheet" type="text/css" href="css/Login.css">
</head>
<body>
<div class="login">
<div class="login-screen">
<div class="app-title">
<h1>Gridler</h1>
</div>
<div class="login-form">
<div class="control-group">
<input type="text" class="login-field" value="" placeholder="username" id="login-name">
<label class="login-field-icon fui-user" for="login-name"></label><br/>
<input type="checkbox" checked name ="IsHuman"> Human Player
</div>
<a class="btn btn-primary btn-large btn-block" href="#" onclick="process()">login</a>
<!--errorMsg below will later be filed with script and ajax to show a msg when a name is already exist-->
<p class="errorMsg" href="#"></p>
</div>
</div>
</div>
</body>
</html>
Add
input.login-field {
display: block;
margin: 0 auto;
}
You've set the width for ALL inputs to 250px simply change
input {
text-align: center;
background-color: #ECF0F1;
border: 2px solid transparent;
border-radius: 3px;
font-size: 16px;
font-weight: 200;
padding: 10px 0;
width: 250px;
transition: border .5s;
}
To
#login-name {
text-align: center;
background-color: #ECF0F1;
border: 2px solid transparent;
border-radius: 3px;
font-size: 16px;
font-weight: 200;
padding: 10px 0;
width: 250px;
transition: border .5s;
}
I have edited your code snippet, please have a look.
* {
box-sizing: border-box;
}
*:focus {
outline: none;
}
body {
font-family: Arial;
background-color: #3498DB;
padding: 50px;
}
.login {
margin: 20px auto;
width: 300px;
}
.login-screen {
background-color: #FFF;
padding: 20px;
border-radius: 5px
}
.app-title {
text-align: center;
color: #777;
}
.login-form {
text-align: center;
}
.control-group {
margin-bottom: 10px;
}
input {
text-align: center;
background-color: #ECF0F1;
border: 2px solid transparent;
border-radius: 3px;
font-size: 16px;
font-weight: 200;
padding: 10px 0;
width: 250px;
transition: border .5s;
}
input:focus {
border: 2px solid #3498DB;
box-shadow: none;
}
input[type="checkbox"]
{
width: 30px;
}
.checkbox {
text-align: left;
font-size: 14px;
margin-top: 5px;
}
.checkbox label {
vertical-align: top;
}
.btn {
border: 2px solid transparent;
background: #3498DB;
color: #ffffff;
font-size: 16px;
line-height: 25px;
padding: 10px 0;
text-decoration: none;
text-shadow: none;
border-radius: 3px;
box-shadow: none;
transition: 0.25s;
display: block;
width: 250px;
margin: 0 auto;
}
.btn:hover {
background-color: #2980B9;
}
.errorMsg{
font-size: 12px;
color: red;
}
.LabeledCheckboxGroup label, .LabeledCheckboxGroup input {
float: none; /* if you had floats before? otherwise inline-block will behave differently */
display: inline-block;
vertical-align: middle;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Login</title>
<!--<script src="script/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">-->
<link rel="stylesheet" type="text/css" href="css/Login.css">
</head>
<body>
<div class="login">
<div class="login-screen">
<div class="app-title">
<h1>Gridler</h1>
</div>
<div class="login-form">
<div class="control-group">
<input type="text" class="login-field" value="" placeholder="username" id="login-name">
<label class="login-field-icon fui-user" for="login-name"></label>
<div class="checkbox">
<input type="checkbox" checked name ="IsHuman"> <label>Human Player</label>
</div>
</div>
<a class="btn btn-primary btn-large btn-block" href="#" onclick="process()">login</a>
<!--errorMsg below will later be filed with script and ajax to show a msg when a name is already exist-->
<p class="errorMsg" href="#"></p>
</div>
</div>
</div>
</body>
</html>