I'm trying to create a login "panel" kindof.
I just want the submit button right next to the password field but without it centering with the password field.
I have tried to uncenter the Submit button but it doesn't work.
.login input:focus {
border-color: #419ebf;
outline-width: 0;
}
.login {
cursor: default;
margin-top: 100px;
text-align: center;
}
.login .fields {
background-color: rgba(0, 0, 0, 0.18);
border-color: #b8bfb7;
width: 325px;
height: 50px;
font-family:'Exo', sans-serif;
font-size: 30px;
color: White;
border-radius: 7px;
padding-left: 4px;
padding-right: 4px;
margin: 5px auto;
}
.login .submit {
width: 150px;
height: 50px;
background-color: rgba(0, 0, 0, 0.18);
border-color: #b8bfb7;
font-family:'Exo', sans-serif;
font-size: 30px;
color: White;
border-radius: 7px;
}
<form method="post" action="login.php" class="login">
<input class="fields" type="text" name="username" placeholder="Username" />
<br/>
<input class="fields" type="password" name="password" placeholder="Password" />
<input class="submit" type="submit" value="Login">
</form>
Thanks for the help
You could consider two things:
If your application is always displayed on fixed width, you might like to try use position: fixed; instead of centering all items and using newline.
If you'd like to be more flexible, find an anchestor or container element and use position: absolute;.
More information on positioning elements through CSS can be found here.
Try to delete
text-align: center;
in
.login{
cursor: default;
margin-top: 100px;
text-align: center;
}
I have removed text-align: center; from .login, added width: 500px; and changed margins to margin: 100px auto 0 auto;
.login {
cursor: default;
margin: 100px auto 0 auto;
width: 500px;
}
.login input:focus {
border-color: #419ebf;
outline-width: 0;
}
.login .fields {
background-color: rgba(0, 0, 0, 0.18);
border-color: #b8bfb7;
width: 325px;
height: 50px;
font-family:'Exo', sans-serif;
font-size: 30px;
color: White;
border-radius: 7px;
padding-left: 4px;
padding-right: 4px;
margin: 5px auto;
}
.login .submit {
width: 150px;
height: 50px;
background-color: rgba(0, 0, 0, 0.18);
border-color: #b8bfb7;
font-family:'Exo', sans-serif;
font-size: 30px;
color: White;
border-radius: 7px;
}
<form method="post" action="login.php" class="login">
<input class="fields" type="text" name="username" placeholder="Username" />
<br/>
<input class="fields" type="password" name="password" placeholder="Password" />
<input class="submit" type="submit" value="Login">
</form>
Related
Below is a code for a contact-us form I'm creating and I gave one of the second div the class name contact-form with the background:rgba(0, 0, 0, 0.8), but I want the background color to center and fit the other div's content instead of being 100% on screens.
I have tried using margin-left:50px and margin-right:50px but it only shifts a little but it doesn't produce the desired result.
codepen.io link
body {
background: linear-gradient(rgb(0, 0, 150, 0.5),rgb(0, 0, 0, 0.5)),url(https://backgroundcheckall.com/wp-content/uploads/2017/12/contact-background-image-8.jpg);
background-size: cover;
background-position: center;
font-family: sans-serif;
}
.contact-title h2 {
font-size: 16px;
margin: 50px;
}
.contact-title {
margin-top: 100px;
color: #fff;
text-transform: uppercase;
transition: all 4s ease-in-out;
}
.contact-form {
background: rgba(0, 0, 0, 0.8);
margin-left: 50px;
margin-right: 50px;
border-radius: 5px;
text-align: center;
opacity: 0.5;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.13);
}
form {
margin-top: 50px;
transition: all 4s ease-in-out;
}
.form-control {
width: 50%;
background: transparent;
border: none;
outline: none;
border-bottom: 1px solid grey;
color: #fff!important;
font-size: 18px;
margin-bottom: 16px;
}
input {
height: 45px;
}
form .submit {
background: #ff5722;
border-color: transparent;
color: #fff;
font-size: 20px;
font-weight: bold;
height: 50px;
margin-top: 20px;
}
form .submit:hover {
background-color: #f44336;
cursor: pointer;
}
.contact-menu {
background-color: black;
margin: 8px 8px 8px 8px;
opacity: 0.8;
overflow: hidden;
height: 50px;
}
.contact-menu a {
color: #f2f2f2;
margin: 0px 0 0 0;
padding: 14px 16px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 17px;
}
.contact-menu a:hover {
background-color: #ddd;
color: #000;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="UX-Compatible" content="ie=edge">
<title>BENDEVI-Contact </title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="contact-menu">
Home
Foreign
AFrica
Unity
</div>
<div class="contact-title">
<h2>Contact Us</h2>
</div>
<div class="contact-form">
<form id="contact-form" action="" method="post">
<input type="text" name="name" class="form-control" placeholder="Your Name" value="" required><br>
<input type="email" name="email" class="form-control" placeholder="Your Email" value="" required><br>
<input type="text" name="Subject" class="form-control" placeholder="Subject" value="" required><br>
<textarea name="message" class="form-control" placeholder="Message" rows="4" required></textarea><br>
<input type="submit" class="form-control submit" value="SEND MESSAGE">
</form>
</div>
</body>
</html>
Based on your description you would like to see the form elements to be 50% of the screen, but the outside div not going wider than the form itself.
You need to do add the margins in unit % of the amount that cuts of the width of the form. In my example 25%. And have the form elements 100% width inside the form, so they take the full width of the cut off outside element. By using % it will flow with every screenwidth the desired result. (Play around with the margin's % to get the desired result).
body {
background: linear-gradient(rgb(0, 0, 150, 0.5), rgb(0, 0, 0, 0.5)), url(https://backgroundcheckall.com/wp-content/uploads/2017/12/contact-background-image-8.jpg);
background-size: cover;
background-position: center;
font-family: sans-serif;
}
.contact-title h2 {
font-size: 16px;
margin: 50px;
}
.contact-title {
margin-top: 100px;
color: #fff;
text-transform: uppercase;
transition: all 4s ease-in-out;
}
.contact-form {
background: rgba(0, 0, 0, 0.8);
margin-left: 25%;
margin-right: 25%;
border-radius: 5px;
text-align: center;
opacity: 0.5;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.13);
}
form {
margin-top: 50px;
padding: 5%;
transition: all 4s ease-in-out;
}
.form-control {
width: 100%;
background: transparent;
border: none;
outline: none;
border-bottom: 1px solid grey;
color: #fff !important;
font-size: 18px;
margin-bottom: 16px;
}
input {
height: 45px;
}
form .submit {
background: #ff5722;
border-color: transparent;
color: #fff;
font-size: 20px;
font-weight: bold;
height: 50px;
margin-top: 20px;
}
form .submit:hover {
background-color: #f44336;
cursor: pointer;
}
.contact-menu {
background-color: black;
margin: 8px 8px 8px 8px;
opacity: 0.8;
overflow: hidden;
height: 50px;
}
.contact-menu a {
color: #f2f2f2;
margin: 0px 0 0 0;
padding: 14px 16px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 17px;
}
.contact-menu a:hover {
background-color: #ddd;
color: #000;
}
<div class="contact-menu">
Home
Foreign
AFrica
Unity
</div>
<div class="contact-title">
<h2>Contact Us</h2>
</div>
<div class="contact-form">
<form id="contact-form" action="" method="post">
<input type="text" name="name" class="form-control" placeholder="Your Name" value="" required><br>
<input type="email" name="email" class="form-control" placeholder="Your Email" value="" required><br>
<input type="text" name="Subject" class="form-control" placeholder="Subject" value="" required><br>
<textarea name="message" class="form-control" placeholder="Message" rows="4" required></textarea><br>
<input type="submit" class="form-control submit" value="SEND MESSAGE">
</form>
</div>
At first my input focus was working just fine, now all of a sudden when I add a couple of more styles to my input, it suddenly stops working. I've only added the 'input[type="text"] and border-radius and padding and some margins since when it was working. When you click each form element, nothing happens even though I have a rule for focus(which you can find near the bottom of the code). Is there any workaround for this?
form{
position: absolute;
left: 50%;
color: white;
margin-left: -180px;
padding: 15px 30px 15px 30px;
background-color: #26004d;
border-radius: 7px;
margin-top: 10px;
width: 300px;
}
label{
float: left;
text-align: right;
margin-right: 15px;
width: 100px;
}
input:focus {
border: 2px solid #862d59;
}
input[type="submit"]{
width: 50%;
background-color: #862d59;
color: white;
margin-top: 5px;
padding: 12px 12px;
border: none;
cursor: pointer;
}
input[type="text"]{
width: 100%;
padding: 12px 12px;
margin: 4px 0;
border: 1px solid #ccc;
border-radius: 6px;
//box-sizing: border-box;
}
<div id="formholder1">
<form>
<div class="single-field">
<label for="Username">Username:</label>
<input name="Name" type="text"></input>
</div>
<div class="single-field">
<label for="Password">Password:</label>
<input name="Password" type="text"></input>
</div>
<input type="submit" value="Login">
</form>
</div>
Use this input[type="text"]:focus {
border: 2px solid #862d59;
}
learn it - http://www.w3schools.com/cssref/trysel.asp?selector=:focus
example - https://css-tricks.com/snippets/css/glowing-blue-input-highlights/
now its working
form{
position: absolute;
left: 50%;
color: white;
margin-left: -180px;
padding: 15px 30px 15px 30px;
background-color: #26004d;
border-radius: 7px;
margin-top: 10px;
width: 300px;
}
label{
float: left;
text-align: right;
margin-right: 15px;
width: 100px;
}
input[type="text"]:focus {
border: 2px solid #862d59;
}
input:focus {
border: 2px solid red;
}
input[type="submit"]{
width: 50%;
background-color: #862d59;
color: white;
margin-top: 5px;
padding: 12px 12px;
border: none;
margin-left:-10px;
cursor: pointer;
}
input[type="text"]{
width: 100%;
padding: 12px 12px;
margin: 4px 0;
border: 1px solid #ccc;
border-radius: 6px;
margin-left:-15px;
//box-sizing: border-box;
}
<div id="formholder1">
<form>
<div class="single-field">
<label for="Username">Username:</label>
<input name="Name" type="text"></input>
</div>
<div class="single-field">
<label for="Password">Password:</label>
<input name="Password" type="text"></input>
</div>
<input type="submit" value="Login">
</form>
</div>
Put Your :focus property after input.
input[type="text"]:focus {
border: 5px solid #862d59;
}
form{
position: absolute;
left: 50%;
color: white;
margin-left: -180px;
padding: 15px 30px 15px 30px;
background-color: #26004d;
border-radius: 7px;
margin-top: 10px;
width: 300px;
}
label{
float: left;
text-align: right;
margin-right: 15px;
width: 100px;
}
input[type="submit"]{
width: 50%;
background-color: #862d59;
color: white;
margin-top: 5px;
padding: 12px 12px;
border: none;
cursor: pointer;
}
input[type="text"]{
width: 100%;
padding: 12px 12px;
margin: 4px 0;
border: 1px solid #ccc;
border-radius: 6px;
box-sizing: border-box;
}
input[type="text"]:focus {
border: 5px solid #862d59;
}
<div id="formholder1">
<form>
<div class="single-field">
<label for="Username">Username:</label>
<input name="Name" type="text"></input>
</div>
<div class="single-field">
<label for="Password">Password:</label>
<input name="Password" type="text"></input>
</div>
<input type="submit" value="Login">
</form>
</div>
I have the following code:
.searchdiv {
width: 140px;
height: 35px;
margin-left: 17px;
margin-top: 12px;
border-width: 2px;
border-style: solid;
border-radius: 4px;
border-color: #707070;
}
.searchbox {
padding: 3px;
font-size: 16px;
font-weight: bold;
background-color: #121212;
color: #6b6b6b;
border-color: #121212;
width: 100px;
height: 25px;
}
.searchbox:focus {
outline: none;
}
.maglass {
position: fixed;
top: 57px;
left: 125px;
}
.maglass:focus {
outline: none;
}
<div class="searchdiv">
<form action="/search.njs" method="GET">
<input class="searchbox" type="text" name="query" value="" />
<input class="maglass" type="image" src="/res/maglass.png">
</img>
</form>
</div>
When I run this, It outputs as:
I would like to know what causes the black border, since none of the colors I specified include it.
I tried removing the border-color property, but that causes the entire border to be grey.
Why does the black(ish) border show up on Chrome?
The issue is because of the default UA settings in Chrome for the input box. The value is by default set to inset (can be seen from the Developer Console) and this is the one that seems to be causing the blackish (it is not black, it seems to be a semi-transparent black) inset border on the element.
The problem is more apparent to see when the border and background colors are changed. I have set some high contrast colors in the below snippet to visualize it.
.searchdiv {
width: 140px;
height: 35px;
margin-left: 17px;
margin-top: 12px;
border-width: 2px;
border-style: solid;
border-radius: 4px;
border-color: #707070;
}
.searchbox {
padding: 3px;
font-size: 16px;
font-weight: bold;
background-color: #121212;
color: #6b6b6b;
border-color: #121212;
width: 100px;
height: 25px;
}
.searchbox:focus {
outline: none;
}
.maglass {
position: fixed;
top: 57px;
left: 125px;
}
.maglass:focus {
outline: none;
}
/* Just for demo */
.searchbox.contrast {
background-color: yellow;
border-color: yellow;
}
.searchdiv {
margin-top: 20px;
}
<div class="searchdiv">
<form action="/search.njs" method="GET">
<input class="searchbox" type="text" name="query" value="" />
<input class="maglass" type="image" src="/res/maglass.png">
</form>
</div>
<div class="searchdiv">
<form action="/search.njs" method="GET">
<input class="searchbox contrast" type="text" name="query" value="" />
<input class="maglass" type="image" src="/res/maglass.png">
</form>
</div>
What is the solution?
The solution to this is very simple. Just override the default border-style and set it to solid like in the below snippet.
.searchdiv {
width: 140px;
height: 35px;
margin-left: 17px;
margin-top: 12px;
border-width: 2px;
border-style: solid;
border-radius: 4px;
border-color: #707070;
}
.searchbox {
padding: 3px;
font-size: 16px;
font-weight: bold;
background-color: #121212;
color: #6b6b6b;
border-style: solid;
border-color: #121212;
width: 100px;
height: 25px;
}
.searchbox:focus {
outline: none;
}
.maglass {
position: fixed;
top: 57px;
left: 125px;
}
.maglass:focus {
outline: none;
}
/* Just for demo */
.searchbox.contrast {
background-color: yellow;
border-color: yellow;
}
.searchdiv {
margin-top: 20px;
}
<div class="searchdiv">
<form action="/search.njs" method="GET">
<input class="searchbox" type="text" name="query" value="" />
<input class="maglass" type="image" src="/res/maglass.png">
</form>
</div>
<div class="searchdiv">
<form action="/search.njs" method="GET">
<input class="searchbox contrast" type="text" name="query" value="" />
<input class="maglass" type="image" src="/res/maglass.png">
</form>
</div>
This is my first time posting, so I hope I'm doing this right.
I want to style a search bar like this one
The problem is, the submit button is always a little off vertically in comparison to the text-input. No matter what I do, there is always at least 1px offset. Help is MUCH appreciated!
I have the following code:
.searchfield{
-webkit-appearance:none;
border: 3px solid #1a5087;
border-right: 0px;
border-radius: 3px;
height: 30px;
font-size: 20px;
margin: 0px;
margin-top: 0px;
outline: 0;
display: inline;
}
.searchbutton{
-webkit-appearance:none;
background-color: #ffb800;
height: 36px;
border: 3px solid #ffb800;
width: 40px;
color: white;
margin-left: -25px;
cursor: pointer;
outline: 0;
background-repeat:no-repeat;
background-position: 2px 2px;
margin-top: 5px;
display: inline;
}
<form action="action.php" method="post">
<input type="number" name="name" placeholder="placeholder" required class="searchfield">
<input type="submit" value="search" class="searchbutton">
</form>
I have tried to rebuilt the same in fiddle. Have a look here
<form class="form-wrapper cf">
<input type="text" placeholder="Search here..." required>
<button type="submit">Search</button>
</form>
A couple of CSS changes should fix the alignment:
Add vertical-align: middle; to both .searchfield and .searchbutton to align them to the middle of each other
Add padding: 0; to .searchfield to remove any padding that the browser may apply to it by default
Remove margin-top: 5px; from .searchbutton to stop it from being pushed down
.searchfield{
-webkit-appearance:none;
border: 3px solid #1a5087;
border-right: 0px;
border-radius: 3px;
height: 30px;
font-size: 20px;
margin: 0px;
margin-top: 0px;
outline: 0;
display: inline;
padding: 0;
vertical-align: middle;
}
.searchbutton{
-webkit-appearance:none;
background-color: #ffb800;
height: 36px;
border: 3px solid #ffb800;
width: 40px;
color: white;
margin-left: -25px;
cursor: pointer;
outline: 0;
background-repeat:no-repeat;
background-position: 2px 2px;
/*margin-top: 5px;*/
display: inline;
vertical-align: middle;
}
<form action="action.php" method="post">
<input type="number" name="name" placeholder="placeholder" required class="searchfield">
<input type="submit" value="search" class="searchbutton">
</form>
How I can delete empty space between search input box and the go button? I've prepared jsfiddle with code sample. Link - jsFiddle
Screenshot:
HTML:
<div class="blablabla">
<form id="search_mini" action="#" method="get">
<div class="form-search">
<!--<label for="search"></label>-->
<input id="search" value="SEARCH" type="text" name="q" class="input-text" maxlength="128" autocomplete="off">
<button type="submit" title="GO" class="button"><span><span>GO</span></span>
</button>
<div id="search_autocomplete" class="search-autocomplete" style="display: none;"></div>
</div>
</form>
CSS:
#search_mini {
width: 268px;
}
.form-search input {
border-color: #7d7c7c;
height: 30px;
width: 150px;
padding:0;
}
.form-search button.button {
background: url(../images/bg.gif) 0 0 repeat-x;
font-size: 12px;
text-align: center;
padding: 0;
height: 36px;
min-width: 84px;
}
Thank you in advance.
You may try margin-left:
#search_mini {
width: 268px;
}
.form-search input {
border-color: #7d7c7c;
height: 30px;
width: 150px;
padding: 0;
}
.form-search button.button {
background: url(../images/bg.gif) 0 0 repeat-x;
font-size: 12px;
text-align: center;
padding: 0;
height: 36px;
min-width: 84px;
margin-left: -4px;/* put as your need */
}
<div class="blablabla">
<form id="search_mini" action="#" method="get">
<div class="form-search">
<!--<label for="search"></label>-->
<input id="search" value="SEARCH" type="text" name="q" class="input-text" maxlength="128" autocomplete="off">
<button type="submit" title="GO" class="button"><span><span>GO</span></span>
</button>
<div id="search_autocomplete" class="search-autocomplete" style="display: none;"></div>
</div>
</form>
add float:left to you .form-search input element
example: http://jsfiddle.net/2nwp36nj/2/
#search_mini {
width: 268px;
}
.form-search input {
border-color: #7d7c7c;
height: 30px;
width: 150px;
padding:0;
float: left;
}
.form-search button.button {
background: url(../images/bg.gif) 0 0 repeat-x;
font-size: 12px;
text-align: center;
padding: 0;
height: 36px;
min-width: 84px;
}
<div class="blablabla">
<form id="search_mini" action="#" method="get" _lpchecked="1">
<div class="form-search">
<!--<label for="search"></label>-->
<input id="search" value="SEARCH" type="text" name="q" class="input-text" maxlength="128" autocomplete="off">
<button type="submit" title="GO" class="button"><span><span>GO</span></span>
</button>
<div id="search_autocomplete" class="search-autocomplete" style="display: none;"></div>
</div>
</form>
</div>
use float left for both of the elements input and button also you need to give a width for button as well. It looks like it is working in the below code.
http://jsfiddle.net/2nwp36nj/3/
#search_mini {
width: 368px;
}
.form-search input, .form-search button {
border-color: #7d7c7c;
height: 30px;
width: 150px;
padding:0;
float: left;
}
.form-search button.button {
background: url(../images/bg.gif) 0 0 repeat-x;
font-size: 12px;
text-align: center;
padding: 0;
height: 36px;
min-width: 84px;
}
are suggested just such a button then she together with the form DEMO
<form class="form-wrapper cf">
<input type="text" placeholder="search" required>
<button type="submit">GO</button>
</form>
.cf:before, .cf:after{
content:"";
display:table;
}
.cf:after{
clear:both;
}
.cf{
zoom:1;
}
.form-wrapper {
width: 450px;
padding: 15px;
margin: 150px auto 50px auto;
background: #444;
background: rgba(0,0,0,.2);
border-radius: 10px;
box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
}
.form-wrapper input {
width: 330px;
height: 20px;
padding: 10px 5px;
float: left;
font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma';
border: 0;
background: #eee;
border-radius: 3px 0 0 3px;
}
.form-wrapper input:focus {
outline: 0;
background: #fff;
box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}
.form-wrapper input::-webkit-input-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
.form-wrapper input:-moz-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
.form-wrapper input:-ms-input-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
.form-wrapper button {
overflow: visible;
position: relative;
float: right;
border: 0;
padding: 0;
cursor: pointer;
height: 40px;
width: 110px;
font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma';
color: #fff;
text-transform: uppercase;
background: #d83c3c;
border-radius: 0 3px 3px 0;
text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
}
.form-wrapper button:hover{
background: #e54040;
}
.form-wrapper button:active,
.form-wrapper button:focus{
background: #c42f2f;
outline: 0;
}
.form-wrapper button:before {
content: '';
position: absolute;
border-width: 8px 8px 8px 0;
border-style: solid solid solid none;
border-color: transparent #d83c3c transparent;
top: 12px;
left: -6px;
}
.form-wrapper button:hover:before{
border-right-color: #e54040;
}
.form-wrapper button:focus:before,
.form-wrapper button:active:before{
border-right-color: #c42f2f;
}
.form-wrapper button::-moz-focus-inner {
border: 0;
padding: 0;
}
Simply add this to your elements :
.form-search input,
.form-search button.button
{
display: block;
float: left;
}
Your space is actually due to a whitespace.
Another working solution: you must insert comment between input tag and button tag. Like this:
<input id="search" value="SEARCH" type="text" name="q" class="input-text" maxlength="128" autocomplete="off"><!--
--><button type="submit" title="GO" class="button"><span><span>GO</span></span>