I want to set the height of an input["text"] to equal to another input["submit"], but i do not understand what is going wrong. they move by some pixels.
This is my HTML code:
<input class="query" type="text" value="" placeholder="Search..."/> <input class="search" type="submit" value="Search" />
Css:
.query
{
width: 310px;
height: 28px;
font-size: 20px;
margin: 0px;
padding: 2px;
}
.search
{
background-color: #ff7700;
border-radius: 3px;
color: #ffffff;
border: 1px solid #ff7700;
font-size: 15px;
padding: 7px 10px 7px 10px;
margin: 0px;
font-weight: bold;
}
input[type=text], input[type=email], input[type=password], select, textarea {
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
border: 1px solid #006699;
border-radius: 3px;
}
input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, select:focus, textarea:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
border: 1px solid rgba(81, 203, 238, 1);
border-radius: 3px;
}
Any suggestions?
Thanks
I think, this would help you (Your Question is not clear, please provide HTML) -
Actually, both elements have save height. I don't think it's element height issue, it's vertical alignment issue(But not sure).
You can try vertical-align: top; Css property.
Note: It's might be give some different result in different-different scenario. You can see in Fiddle it's give correct output, but if you provide HTML it help us to understand your problem
.search {
background-color: #ff7700;
border-radius: 3px;
color: #ffffff;
border: 1px solid #ff7700;
font-size: 15px;
padding: 7px 10px 7px 10px;
margin: 0px;
font-weight: bold;
vertical-align: top;
}
Working Fiddle
Your question isn't very clear, but here might be what's going wrong:
I don't see height: 28px; under .search - that should make it the same height,
if you want all input fields to be the same height, add height: 28px under where you have input[type=text], input[type=email], input[type=password], select, text area
You also need to take margin, padding and border into account
As james said - proper indentation makes it much easier to read - you might have picked up on the problems ;)
Hope this helps,
Tom
Set .query class's height to 30px
.query
{
width: 310px;
height: 30px;
font-size: 20px;
margin: 0px;
padding: 2px;
}
here is a working example http://jsfiddle.net/9ZYCw/
Related
I was just having a small issue with applying equal padding to a button, I applied the following styles to it:
.btn-request-more-info {
background: #fff;
color: #6e2c91;
font-size: 18px;
padding: 0.5 2.5em;
border: 1px solid #fff;
font-weight: 900;
text-transform: uppercase;
border-radius: 10px;
border: 1px solid #fff;
-webkit-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
Now since the above doesn't work, I had to use a hack and reduce 1px from the bottom padding of the button:
.btn-request-more-info {
background: #fff;
color: #6e2c91;
font-size: 18px;
padding: 10px 2.5em 9px;
border: 1px solid #fff;
font-weight: 900;
text-transform: uppercase;
border-radius: 10px;
border: 1px solid #fff;
-webkit-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
10px above and 9px below, so why is it that 0.5em padding is not equally distributed?
P.S. to recreate the error, change the styles in the button to padding:0.5em 2em.
Difference in padding (I have used ruler to show visually the difference in padding distribution).
Padding above:
Padding below:
I have had this problem many times before, but never found a solution. Why might this be happening?
This can be because of line-height property of css. If you see the computed values(visual representation present at the end of style tab of developer tool) from developer tool both padding-top and bottom are same. But the difference you notice is not considering the line-height of the text. If you hover over your element from developer tool you'll see that box surrounding the text has some space below the text. The browser while applying padding consider this to be the part of the text and applies padding only around this box.
Try line-height:normal properties in css for button:
.btn-request-more-info {
background: #fff;
color: #6e2c91;
font-size: 18px;
padding: 10px 2.5em 10px;
border: 1px solid #fff;
font-weight: 900;
text-transform: uppercase;
border-radius: 10px;
border: 1px solid #fff;
line-height:normal;
-webkit-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
I have a search field with a search icon in the background. Here's the CSS:
input[type=search] {
outline: none;
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-family: inherit;
font-size: 100%;
background: #ededed url('$http://www.$domain/images/search-icon.png') no-repeat right 5px top 5px;
padding-left: 8px;
padding-right: 24px;
border: solid 1px #ccc;
width: 122px;
font-size:16px;
font-family: \"Lato\";
font-weight: 300;
-webkit-border-radius: 10em;
-moz-border-radius: 10em;
border-radius: 10em;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
input[type=search]:focus {
width: 230px;
background-color: #fff;
border-color: #7486BA;
-webkit-box-shadow: 0 0 5px #7486BA;
-moz-box-shadow: 0 0 5px #7486BA;
box-shadow: 0 0 5px #7486BA;
}
#media screen and (max-width: 800px) {
input[type=search]:focus {
width: 122px;
}
}
input[type=search]:-moz-placeholder {
color: #DEDEDE;
}
input[type=search]::-webkit-input-placeholder {
color: #DEDEDE;
}
and here's the HTML:
<form id=\"search_form\" method=\"GET\" action=\"$http://www.$domain/\">
<input type=\"search\" id=\"search\" name=\"search\" placeholder=\"$search_placeholder\" class=\"awesomplete\" autocomplete=\"off\">
</form>
The form can only be submit by pressing enter button. What would be the easiest way to make the search icon clickable ?
I tried making a 30x30 anchor with relative positionning on top of the search icon but it wasn't working well
I am currently working on a website with a complex CSS file. I have added a new feature, but I can't seem to edit an input tab that I have due to other styling affecting it. Essentially I am trying to over-ride a certain property.
CSS
textarea, input[type="number"]{
background-color: #ffffff;
border: 0 solid #CCCCCC;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.035) inset;
transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
}
select, input[type="number"] {
border-radius: 2px 2px 2px 2px;
color: #555555;
display: inline-block;
height: 37px;
font-size: 14px;
line-height: 15px;
margin-bottom: 0px;
padding: 2px 6px;
vertical-align: middle;
}
select, textarea, input[type="number"]
color: #626c72;
display: inline-block;
font-size: 14px;
line-height: 20px;
margin-bottom: 10px;
padding: 4px 6px;
vertical-align: middle;
box-shadow: 1px 1px 8px rgba(0,0,0,0.05);
width: 100%;
}
.target {
border: 0;
}
HTML
<div class="container">
<div class="row">
<div class="form-group col-sm-6">
<label for="Label1">Label1:</label>
<input class="form-control target" step="any" type="number" min="0" max="24"></input>
</div>
</div>
</div>
What I am trying to do is have is override border: 0 solid #CCCCCC; from the first selector and make it look like the default bootstrap input for the .target input . I don't want it to affect all other inputs in my application. I only want it to affect the html you see above. I thought my last styling .target selector would do the trick, but it doesn't. My jsFiddle is here. I want the default bootstrap border/outline for my input. As you can tell its not there right now.
You can use the CSS :not selector if you don't want your custom CSS to apply to that specific input:
textarea, input[type="number"]:not(.target) {
background-color: #ffffff;
border: 0 solid #CCCCCC;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.035) inset;
transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
}
select, input[type="number"]:not(.target) {
border-radius: 2px 2px 2px 2px;
color: #555555;
display: inline-block;
height: 37px;
font-size: 14px;
line-height: 15px;
margin-bottom: 0px;
padding: 2px 6px;
vertical-align: middle;
}
Bootply
You can also use:
input.target {
border: 0;
}
or
input[type="number"].target {
border: 0;
}
I'm trying to learn HTML & CSS and tried to make a basic login form with CSS3 effects. The link are here below to the code.
Demo - http://codepen.io/anon/pen/PwaLBE
HTML
<form action="" method="">
<input type="text" name="username" placeholder="Användarnamn">
<input type="password" name="password" placeholder="Lösenord"><br>
<input type="submit" name="login" value="Logga in">
Glömt lösenord?
Registrera
</form>
CSS
body {
margin: 0;
padding: 0;
}
form {
margin-top: 200px;
font-family: Helvetica, sans-serif;
text-align: center;
}
/* Input text actions */
input[type="text"] {
width: 150px;
padding: 10px;
border: solid 1px #dcdcdc;
transition: box-shadow 0.3s, border 0.3s;
}
input[type="text"]:hover {
border: solid 1px #707070;
box-shadow: 0 0 5px 1px #969696;
}
input[type="text"]:focus {
border: solid 1px #707070;
box-shadow: 0 0 5px 1px #969696;
}
/* Input password actions */
input[type="password"] {
width: 150px;
padding: 10px;
border: solid 1px #dcdcdc;
transition: box-shadow 0.3s, border 0.3s;
}
input[type="password"]:hover {
border: solid 1px #707070;
box-shadow: 0 0 5px 1px #969696;
}
input[type="password"]:focus {
border: solid 1px #707070;
box-shadow: 0 0 5px 1px #969696;
}
/* Input submit-button actions */
input[type="submit"] {
margin-top: 5px;
margin-left: -112px;
color: #FFFFFF;
background-color: #16a085;
padding: 10px;
border: solid 1px #FFFFFF;
transition: box-shadow 0.3s, border 0.3s;
}
input[type="submit"]:hover {
border: solid 1px #707070;
box-shadow: 0 0 5px 1px #969696;
}
/* Link actions */
a {
font-size: 12px;
transition: color 0.5s;
font-family: Helvetica, sans-serif;
text-decoration: none;
list-style: none;
color: #3498db;
}
a:hover {
color: #2980b9;
}
There are some problems:
"glömt lösenord" & "Registrera" are not under the password form to the right. How can I move the links to the right precisely under the form to the right?
The "Logga in" button seems to be under the form to the left, but zoom once or twice and the position will change.
Why do I have margin-left: -112px; under the Input submit for? That value looks weird but its their it is under the form to the left.
And the last problem, the links "Glömt lösenord" & "Registrera" are in the middle of the button to the left, how can I take them down so they are at the same level as the button to the left?
EDIT: If you click on the button, it will take some small amount of time to be clicked, how can I change that time without changing for the inputs?
http://codepen.io/anon/pen/LEraqb
body {
margin: 0;
padding: 0;
}
form {
margin-top: 200px;
font-family: Helvetica, sans-serif;
text-align: center;
}
/* Input text actions */
input[type="text"] {
width: 150px;
padding: 10px;
border: solid 1px #dcdcdc;
transition: box-shadow 0.3s, border 0.3s;
}
input[type="text"]:hover {
border: solid 1px #707070;
box-shadow: 0 0 5px 1px #969696;
}
input[type="text"]:focus {
border: solid 1px #707070;
box-shadow: 0 0 5px 1px #969696;
}
/* Input password actions */
input[type="password"] {
width: 150px;
padding: 10px;
border: solid 1px #dcdcdc;
transition: box-shadow 0.3s, border 0.3s;
}
input[type="password"]:hover {
border: solid 1px #707070;
box-shadow: 0 0 5px 1px #969696;
}
input[type="password"]:focus {
border: solid 1px #707070;
box-shadow: 0 0 5px 1px #969696;
}
/* Input submit-button actions */
input[type="submit"] {
margin-top: 5px;
margin-left: -112px;
color: #FFFFFF;
background-color: #16a085;
padding: 10px;
border: solid 1px #FFFFFF;
transition: box-shadow 0.3s, border 0.3s;
}
input[type="submit"]:hover {
border: solid 1px #707070;
box-shadow: 0 0 5px 1px #969696;
}
/* Link actions */
a {
font-size: 12px;
transition: color 0.5s;
font-family: Helvetica, sans-serif;
text-decoration: none;
list-style: none;
color: #3498db;
}
a:hover {
color: #2980b9;
}
1- How can I move the links to the right precisely under the form to the right?
I used a float:right
Using flexboxes could be another way.
2- zoom once or twice and the position will change.
some sizes was defined in pixel, so it is static and doesn't resists to all layouts.
About negative margins:
https://stackoverflow.com/questions/4989930/using-css-negative-margins-a-good-or-bad-practice
http://www.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/
3- And the last problem, the links "Glömt lösenord" & "Registrera" are in the middle of the button to the left, how can I take them down so they are at the same level as the button to the left?
I prefer like that!
4- If you click on the button, it will take some small amount of time to be clicked, how can I change that time without changing for the inputs?
the css animation seems to have to finish before the action occurs.
There are many questions, will try to cover it all.
First of all, remove text-align: center; on the <form> that will make the other tasks easier to solve.
Secondly, add <p> or <div> etc to wrap your input fields.
Also want to say I love the cleanness of your code, very good start. Don't be afraid to use some classes or ids.
See the blow updated code based on yours, demo - http://jsfiddle.net/78ds0jpt/
HTML
<form action="" method="">
<p>
<input type="text" name="username" placeholder="Användarnamn">
<input type="password" name="password" placeholder="Lösenord">
</p>
<p>
<input type="submit" name="login" value="Logga in">
<span>
Glömt lösenord?
Registrera
</span>
</p>
</form>
CSS
body {
margin: 0;
padding: 0;
}
form {
/* margin-top: 200px; */
font-family: Helvetica, sans-serif;
/* text-align: center; */
}
form p {
margin: 10px;
}
form p span {
padding-left: 130px;
}
/* Input text actions */
input[type="text"] {
width: 150px;
padding: 10px;
border: solid 1px #dcdcdc;
transition: box-shadow 0.3s, border 0.3s;
}
input[type="text"]:hover {
border: solid 1px #707070;
box-shadow: 0 0 5px 1px #969696;
}
input[type="text"]:focus {
border: solid 1px #707070;
box-shadow: 0 0 5px 1px #969696;
}
/* Input password actions */
input[type="password"] {
width: 150px;
padding: 10px;
border: solid 1px #dcdcdc;
transition: box-shadow 0.3s, border 0.3s;
}
input[type="password"]:hover {
border: solid 1px #707070;
box-shadow: 0 0 5px 1px #969696;
}
input[type="password"]:focus {
border: solid 1px #707070;
box-shadow: 0 0 5px 1px #969696;
}
/* Input submit-button actions */
input[type="submit"] {
margin-top: 5px;
/* margin-left: -112px; */
color: #FFFFFF;
background-color: #16a085;
padding: 10px;
border: solid 1px #FFFFFF;
transition: box-shadow 0.3s, border 0.3s;
}
input[type="submit"]:hover {
border: solid 1px #707070;
box-shadow: 0 0 5px 1px #969696;
}
input[type="submit"]:focus {
outline: 0;
}
/* Link actions */
a {
font-size: 12px;
transition: color 0.5s;
font-family: Helvetica, sans-serif;
text-decoration: none;
list-style: none;
color: #3498db;
}
a:hover {
color: #2980b9;
}
When you work with a form, it is suggested to wrap it into selector, as in;
body should have value: margin:0 auto;
#mywrapper{
margin:0 27%; /*you can set it by yourself*/
max-width:38%;
}
after that, you can wrap the 2 links as follows:
UPDATED:
span .mylinks{
float:right;
padding-right:5px;
}
so. it should be like this:
<div id="mywrapper">
<form action="" method="">
<input type="text" name="username" placeholder="Användarnamn" />
<input type="password" name="password" placeholder="Lösenord" />
<br/>
<input type="submit" name="login" value="Logga in" />
Glömt lösenord?
Registrera
</form>
</div>
Demo HERE
I'm trying to link the submit button to be an email address. But can't seem to get it to work.
Any suggestions on what I may be doing wrong?
It looks like it works on first inspection, but whenever I upload it to the site it doesn't work =S
Here is the HTML:
<input type="submit" value="Get In Touch" name="submit" class="submit" id="submit">
Below is the CSS:
body {
font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 100px;
font-size: 13px;
}
div {
background: #fff;
margin: 0 auto;
width: 200px;
padding: 100px;
text-align: center;
/* border-radius */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
/* box-shadow */
-webkit-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
-moz-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
}
input[type="submit"] {
height: 50px;
padding: 0 48px; margin: 10px auto 0 auto;
background: #090a0b;
border: 0;
text-transform: uppercase;
font-family: "Open Sans";
font-size: 24px;
color: #fff;
font-weight: 400;
cursor: pointer;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
opacity: 1;
-webkit-appearance: none;
border: solid 1px #fff;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
background: transparent;
}
If you really want to use submit button inside <a> than you could use this instead.without <a> tag.
HTML
<input type="submit" class='button' value="Mail US" onclick="window.location.href='mailto:email#email.co'">
CSS
.button {
font: bold 11px Arial;
text-decoration: none;
background-color: #EEEEEE;
color: #333333;
padding: 2px 6px 2px 6px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;
}
Fiddle HERE: Fiddle
Otherwise you could just use <a> tags instead and cover it with CSS.
Both are great approaches
Try this way:
html
<a class="button" href="mailto:email#email.co">Get In Touch</a>
css
.button {
font: bold 11px Arial;
text-decoration: none;
background-color: #EEEEEE;
color: #333333;
padding: 2px 6px 2px 6px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;
}
Just use a tag and apply some css
You could use an <a> tag and style it, or a <button> (which is sometimes fubar in earlier IE), or, if you need to use a form you could do this
<form action="mailto:user#user.com">
<input type="submit" name="submit" value="Email">
</form>
If you are trying to submit a form full of data to an email address, a simple mailto is not what you are going to need. All mailto does is open the native email application on your computer and fill out the "To:" field with the email address you put in the href.
To submit an email with form data you would need an email handler. In PHP you can simply attach the $_POST data to the php mail() function. Here is a good tutorial on that.
Another option would to use a hosted solution like emailmeform. Or even a javascript mailing solution like addthis or sharethis. They have APIs available to allow you to input data into the email being sent.
Hope this helps!