Height of submit field is slightly smaller than the text input field. How do I fix it?
HTML code:
<form name="searchBox" id="searchBox" action="#" method="post"> <input type="text" name="query" id="query"/>
<input type="submit" name="sub" id="sub" value="Search"/> </form>
CSS code:
form input[type="text"] {
height: 28px;
width: 300px;
margin: 0;
padding: 0;
font-size: 15px;
border: 1px solid #CCCCCC;
}
form input[type="submit"] {
height: 28px;
width: 80px;
margin: 0;
padding: 0;
font-size: 15px;
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
}
you can increase or decrease height of the text/submit fields to align properly.
Example http://jsfiddle.net/2DdA3/
Related
To make room for an icon, I have moved the placeholder text 35px to the right of my input; However, when I start to type in the input field, the text starts behind the icon.
I attempted a bit of googling, but i have yet to find an answer. The search results I've seen regard the placeholder, but it is not what I am having troubles with.
How do I move the text which is being inputted, so it matches that of the placeholder? (form-group__input)
.login {
background-color: $color-white;
width: 30vw;
position: absolute;
#include position-center;
padding: 20px;
}
.login h2 {
color: $color-gray;
font-weight: bold;
}
.login .form-group {
width: 80%;
margin: 10px auto;
position: relative;
}
.login .form-group .form-group__input {
background: none;
border: 1px solid gray;
padding: 10px;
border-radius: 6px;
width: 100%;
}
.login .form-group .form-group__input::placeholder {
padding-left: 35px;
}
.login .form-group__icon {
position: absolute;
left: 15px;
font-size: 22px;
color: gray;
top: 6px;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<section class="login">
<h2>Login</h2>
<div class="form-group">
<input type="email" placeholder="someemail#email.com" class="form-group__input">
<span class="form-group__icon"><i class="far fa-envelope"></i></span>
</div>
<div class="form-group">
<input type="password" placeholder="**********" class="form-group__input">
<span class="form-group__icon"><i class="fas fa-lock"></i></span>
</div>
Log In
Create Account
</section>
Plz try this code..
css
.form-group__input {
padding: 10px 10px 10px 40px;
}
I am trying to remove spacing between elements stacked on each other.
This is what i have:
input[type="text"] {
width: 40%;
height: 30px;
border-radius: 29px;
border-style: none;
padding-right: 100px;
padding-left: 30px;
border-width: 0;
}
input[type="submit"] {
margin-left: -100px;
height: 30px;
width: 100px;
border-width: 0;
border-radius: 29px;
background: blue;
color: white;
-webkit-appearance: none;
}
body {
background-color: black;
}
<br/>
<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname" placeholder="Enter your email"><input type="submit">
</form>
I have tried top:0; and bottom:0; but it does not seem to solve my problem in this example.
Remove padding-top and padding-bottom on input[type="text"]
padding-top: 0px;
padding-bottom: 0px;
input[type="text"] {
padding-top: 0px;
padding-bottom: 0px;
width: 40%;
height:30px;
border-radius: 29px;
border-style:none;
padding-right:100px;
padding-left:30px;
border-width: 0;
}
input[type="submit"] {
margin-left: -100px;
height:30px;
width: 100px;
border-width: 0;
border-radius: 29px;
background: blue;
color: white;
-webkit-appearance: none;
}
body {
background-color: black;
}
<br/>
<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname" placeholder="Enter your email"><input type="submit">
</form>
Remove the top bottom padding of input[type="text"].
input[type="text"] {
width: 40%;
height: 30px;
border-radius: 29px;
border-style: none;
padding-right: 100px;
padding-left: 30px;
padding-top: 0;
padding-bottom: 0;
}
I removed the height property from both elements and added it to the container, the form. Then added display: flex to the form.
form {
height: 30px;
display: flex;
}
input[type="text"] {
width: 40%;
border-radius: 29px;
border-style: none;
padding-right: 100px;
padding-left: 30px;
border-width: 0;
}
input[type="submit"] {
margin-left: -100px;
width: 100px;
border-width: 0;
border-radius: 29px;
background: blue;
color: white;
-webkit-appearance: none;
}
body {
background-color: black;
}
<br/>
<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname" placeholder="Enter your email"><input type="submit">
</form>
I have a <a> tag with border: 1px solid #CCC; border-bottom:none; style and it's leaves a tiny gap, please look at the codepen result to see what I mean. This gap appears left from login tab if the login tab is active or right from register tab if register tab is active.
HTML:
<div id="w-login">
<div id="login">
<menu id="tabs"> <a id="tab-signin" class="tab-active"><i class="fa fa-unlock-alt"></i>Login</a><a id="tab-signup"><i class="fa fa-lock"></i>Register</a>
</menu>
<div id="signin">
<form class="form-horizontal">
<div class="form-group">
<label for="username" class="control-label col-1">Username:</label>
<input type="text" name="username" class="form-control col-2" id="si-username">
</div>
<div class="form-group">
<label for="password" class="control-label col-1">Password:</label>
<input type="password" name="password" class="form-control col-2" id="si-password">
</div>
<input type="submit" value="Login" class="btn btn-primary" id="si-submit">
</form>
</div>
<div id="signup">
<form class="form-horizontal">
<div class="form-group">
<label for="username" class="control-label col-1">Username:</label>
<input type="text" name="username" class="form-control col-2" id="su-username">
</div>
<div class="form-group">
<label for="password" class="control-label col-1">Password:</label>
<input type="password" name="password" class="form-control col-2" id="su-password">
</div>
<div class="form-group">
<label for="email" class="control-label col-1">Email:</label>
<input type="text" name="email" class="form-control col-2" id="su-email">
</div>
<input type="submit" value="Register" class="btn btn-primary" id="su-submit">
</form>
</div>
</div>
</div>
CSS:
#container {
height: 100%;
width: 100%;
text-align: center;
font-size: 14px;
}
#container:before {
content:'';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -3px;
}
#w-login {
display: inline-block;
vertical-align: middle;
width: 40%;
padding: 5px;
}
#login {
}
#signin, #signup {
border: 1px solid #CCC;
border-top: none;
padding: 20px 10px;
border-bottom-left-radius: 15px;
-webkit-border-bottom-left-radius: 15px;
-moz-border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
-webkit-border-bottom-right-radius: 15px;
-moz-border-bottom-right-radius: 15px;
}
#signup {
display: none;
}
#tabs {
padding: 0;
margin: 0;
border: 1px solid #CCC;
border-top-left-radius: 15px;
-webkit-border-top-left-radius: 15px;
-moz-border-top-left-radius: 15px;
border-top-right-radius: 15px;
-webkit-border-top-right-radius: 15px;
-moz-border-top-right-radius: 15px;
border-bottom: none;
}
#tabs a {
padding: 10px 0;
display: inline-block;
width: 50%;
cursor: pointer;
text-decoration: none;
}
#tabs .tab-active {
}
#tab-signin.tab-active {
border: 1px solid #CCC;
border-width: 0 1px 1px 0;
}
#tab-signup.tab-active {
border: 1px solid #CCC;
border-width: 0 0 1px 1px;
}
.col-1 {
width: 28%;
}
.col-2 {
width: 70%;
display: inline-block;
}
.form-horizontal .form-group {
margin-right: 0;
margin-left: 0;
}
.btn {
width: 99%;
}
.fa {
padding-right: 5px;
}
Note: the rest of the CSS styles come from Bootstrap
JS/jQuery:
$(function(){
$('#tab-signin').click(function(){
$('#signup').hide();
$('#signin').show();
switchTab();
});
$('#tab-signup').click(function(){
$('#signin').hide();
$('#signup').show();
switchTab();
});
});
function switchTab(){
$('#tabs a').toggleClass('tab-active');
}
I suggest the following approach.
I would take advantage of the fact that in your mark-up the two tab elements,
#tab-signin and #tab-signup, are children of the menu#tabs element.
That being the case, I would place the left, top and right borders on the #tabs element
and remove the left/top and top/right borders on the two children elements (#tab-signin and #tab-signup respectively).
The CSS for #tabs would look like:
#tabs{
padding: 0;
margin: 0;
border: 1px solid #CCC;
border-top-left-radius: 15px;
-webkit-border-top-left-radius: 15px;
-moz-border-top-left-radius: 15px;
border-top-right-radius: 15px;
-webkit-border-top-right-radius: 15px;
-moz-border-top-right-radius: 15px;
border-bottom: none;
}
To style the .tab-active cases, I would create two specific rules for the sign-in and the sign-up tabs, for the right/bottom and the bottom/left borders respectively:
#tabs .tab-active{
}
#tab-signin.tab-active{
border: 1px solid #CCC;
border-width: 0 1px 1px 0;
}
#tab-signup.tab-active{
border: 1px solid #CCC;
border-width: 0 0 1px 1px;
}
See demo at: http://jsfiddle.net/audetwebdesign/By4g5/
The problem you noticed earlier is not really a browser bug. The CSS specification does not specify exactly how browsers are to draw the corners of borders (the joints), so you are at the mercy of the browser for that particular design detail.
My approach is to avoid the problem by taking full advantage of the HTML mark-up in your code.
You should probably try floats but a quick fix could be negative margins...
#tabs{
padding: 0;
margin: 0px 0px -1px 0px;
}
DEMO
EDIT: inline blocks side effects, something to read ;)
http://css-tricks.com/fighting-the-space-between-inline-block-elements/
Another solution would be if set a transparent border on class .tab-active.
just using border transparent .
#tabs .tab-active{
border-bottom: 1px solid transparent;
}
Chec the DEMO.
I want to make the search bar longer and higher. Lining up with the end of the body (width) and menu (heighth). I looked at other tutorials and questions but I am missing something.
CSS
form input[type="text"] {
height: 45px;
width: 250px;
margin: 0;
padding: 0;
font-size: 15px;
border: 1px solid #CCCCCC;
float: left;
}
HTML
<form name="catsearchform60238" method="post" action="/Default.aspx?SiteSearchID=2433&PageID=/search.html">
<div class="cat_textbox">
<input type="text" value="text field"></input>
<input type="submit" value="Submit"></input>
</form>
Using display: block; is probably what you are looking for.
form input[type="text"] {
display: block;
height: 45px;
width: 250px;
margin: 0;
padding: 0;
font-size: 15px;
border: 1px solid #CCCCCC;
float: left;
}
i have this template http://khine.3b1.org/search.html and on the right hand side i have a search input field.
the problem is that the cursor sits before the background image!
how do i shift it to the right by 25px so that it starts after the search_icon.png image. the '.placeholder-field' does not seem to do anything for me!
<div id="topsearch" class="yui3-u-1-8"><!-- topsearch width: 12.5% placeholder-field -->
<table>
<tr>
<td>
Advanced Search
</td>
<td>
<form action=";browse_content" method="get">
<div class="search placeholder-field">
<input name="search_text" type="text">
<input value="Search" class="button" type="submit">
</div>
</form>
</td>
</tr>
</table>
</div>
here is the css:
/**************************************************************************
* Search
**************************************************************************/
#topsearch {
display: inline-block;
margin: 3px 0 0 0;
}
#topsearch .advanced-search {
display: inline-block;
float:right;
margin:0 3px 0 0;
width: 16px;
height: 16px;
text-indent: -9999px;
background: url('/ui/core/resources/advanced_search_icon.png') 0 0 no-repeat;
opacity: .2;
}
#topsearch .search input {
font-size: 100%;
width: 90%;
padding: 5px 2px;
border: 1px solid #DDD;
border-top-color: #CCC;
border-bottom-color: #EAEAEA;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: url('/ui/core/resources/search_icon.png') 5px 50% no-repeat white;
}
.placeholder-field {
left: 25px;
}
#topsearch form input.button {
display: none;
}
what am i missing?
is there a way to improve the template so that it is a bit more fluid?
many thanks
Simply reduce the input width and add padding-left on your input like this :
#topsearch .search input {
padding: 5px 2px 5px 25px;
width: 75%;
}
I've fixed it:
#topsearch form input.button{
cursor: pointer;
height: 30px;
position: absolute;
right: 150px;
width: 30px;
display:block
}
You also have to remove the value property of input:
<input type="submit" class="button" value="" style="position: absolute; cursor: pointer; width: 30px; right: 150px; height: 30px;">