Search text field and button height / position (CSS) - html

I have a problem with my search box. I'm trying to make the text field and button the same height, but I can't get it right in all browsers. Here is the code: http://codepen.io/anon/pen/ygCFz . This method works fine in Firefox, but not in Chrome.
So what would be the best method to have an equal height and position for both the text field and button?
Thanks!
//edit: because someone asked for the code for further reference, here it is:
HTML
<form id="search" action="" method="get">
<input type="text" name="search" class="sfield" value="search and go"/>
<input type="submit" value="Search" class="sbutton"/>
</form>
CSS
input.sfield{
background-color:#fff;
border-color:#cecece;
border-style:solid;
border-width:1px 0 1px 1px;
font-size:0.9em;
line-height:1em;
height:26px;
}
input.sbutton{
background-color:#d91515;
height:inherit;
border:none;
color:#fff;
position:relative;
left:-6px;
bottom:-1px;
height:28px;
}

Use padding instead height on input elements. Line-height should be exactly the same as font-size for Firefox. So if you want you font-size to 16px, put your line-height to 16px and add padding at top and bottom. For your submit button, use absolute positionning to be sure it will be at top:0 and bottom:0. Just add padding-left for submit button width equivalent on input and it's all done !
#search {
position:relative;
display:inline-block;
}
input.sfield{
background-color:#fff;
border-color:#cecece;
border-style:solid;
border-width:1px 0 1px 1px;
font-size:0.9em;
line-height:1;
padding:5px;
display:inline-block;
padding-right:50px;
}
input.sbutton{
background-color:#d91515;
border:none;
color:#fff;
position:absolute;
top:0px;right:0px;bottom:0px;
width:50px;
}

You can either set a definite height property for both elements or you can simply tell Sbutton to inherit the styles from Sfield.
<input type="submit" value="Search" class="sfield sbutton"/>
I also adding a bit of padding to make it even.
http://codepen.io/anon/pen/zBlwD

HTML:
<form id="search" action="" method="get">
<input type="text" name="search" class="sfield" value="search and go"/><input type="submit" value="Search" class="sbutton"/>
</form>
CSS:
input.sfield{
background-color:#fff;
border-color:#cecece;
border-style:solid;
border-width:1px 0 1px 1px;
font-size:0.9em;
line-height:0.9em;
height:26px;
margin: 0;
}
input.sbutton{
background-color:#d91515;
height:inherit;
border: 1px solid #d91515;
color:#fff;
position:relative;
margin: 0;
height:30px;
}

Well, I hope the solution isn't this simple, but you have height defined twice in your rule for the sbutton class:
input.sfield{
background-color:#fff;
border-color:#cecece;
border-style:solid;
border-width:1px 0 1px 1px;
font-size:0.9em;
line-height:1em;
height:26px;
}
input.sbutton{
background-color:#d91515;
height:inherit; //that's one
border:none;
color:#fff;
position:relative;
left:-6px;
bottom:-1px;
height:28px; //that's two
}
See what happens when you get rid of one. It should work. Also take a look at the line-height rule for your textbox. If the font size is different than the line height, that would explain why the sizes are different. Firefox and Chrome use different conversions from ems to pixels and vice versa.

Related

Customized input text box

Hi i want to make a customized input text box like this image:
I search many articles but found nothing to do this so please help me
This is not a new answer. But some modification to answer of #alvaro-menéndez to make it more compact and generic.
div {
position:relative;
display:inline-block;
margin:50px;
}
input[type="text"] {
width:300px;
padding:10px;
outline:0;
border:0;
background-color: #eee;
}
.preinput {
position:absolute;
z-index:-1;
display:block;
bottom:-1px;
left:-1px;
border-bottom:1px solid #999;
border-right:1px solid #999;
border-left:1px solid #999;
width:100%;
height:20px;
}
<div>
<span class="preinput"></span>
<input type="text" placeholder="Search" />
</div>
You could use this little and simple jquery to add an element after your input:
$(".input").after("<span></span>");
and then you just have to style it like in this FIDDLE
Edited: updated fiddle to put the element UNDER the input and move it slightly bottom and left so it will be visible even if input has a background-color
You can just use a css background image on your input. Use a placeholder attribute for you "search".
HTML
<input type="search" placeholder="Search" />
CSS
input[type="search"]{
background:url(your_image_path) left bottom no-repeat;
}

Change search form button text to image

I can't seem to get my head around the following problem. So I procured a template of a search form which I then changed to fit my design requirements but I can't seem to be able to change the value=s bit to an image of a search box button. Please see http://jsfiddle.net/p9URB/. The code is as follows:
HTML
<form action="/search" method="get" id="search_form" class="clearfix voicetron" data-ds-protection="enabled">
<div id="search_holder">
<input type="text" id="search_field" name="q" value="" title="Enter search term" placeholder="Search" data-validators="required" data-speech-enabled="" data-search-engine="oracle" x-webkit-speech="x-webkit-speech" autocomplete="off">
<input type="text" id="search_suggest" value="" placeholder="" disabled="">
<input type="submit" value="y" data-submit-text="s" class="btn_search iconify" title="Search">
</div>
</form>
CSS
#search_form{
position:relative;
margin:10px 0;
float:right
}
#search_form #search_holder{
display:block
}
#search_form #search_holder input[type="text"]{
font-size:13px;
width:180px;
height:26px;
margin:0;
position:absolute;
right:0;
padding:0 32px 0 6px
}
#search_form #search_holder #search_field{
z-index:3;
border:1px solid #C9C9C9;
background:url("") #fff;
-webkit-border-radius:5px;
-moz-border-radius:5px;
-o-border-radius:5px;
-ms-border-radius:5px;
border-radius:5px;
text-shadow:0 0 1px #fff
}
#search_form #search_holder #search_field:focus,#search_form #search_holder #search_field:hover{
border-color:#acb1b4;
color:#123
}
#search_form #search_holder #search_field:-moz-placeholder{
color:#a6a7a8
}
#search_form #search_holder #search_field::-webkit-input-placeholder{
color:#a6a7a8
}
#search_form #search_holder #search_field:-moz-placeholder{
color:#a6a7a8
}
#search_form #search_holder #search_suggest{
z-index:2;
border:none;
background:#fff;
border:1px solid #fff;
-webkit-border-radius:5px;
-moz-border-radius:5px;
-o-border-radius:5px;
-ms-border-radius:5px;
border-radius:5px;
color:#9da2a8
}
#search_form #search_holder .overTxtLabel{
z-index:113
}
#search_form .active{
color:#fff;
background:#a6a7a8
}
#search_form .btn_search{
z-index:3;
position:absolute;
top:4px;
right:1px;
display:block;
color:#a6a7a8;
width:28px;
height:21px;
font-size:17px;
line-height:21px;
text-align:center;
font-weight:400;
background:0 0;
border:0;
border-left:1px dotted #a6a7a8
}
#search_form .btn-anchor{
background:0 0;
border:0;
border-bottom:1px solid #ccc;
color:#666;
margin:0 10px;
font-size:10px;
padding-bottom:2px;
font-weight:400
}
#search_form.voicetron [name="q"]{
padding-right:34px;
width:170px;
line-height:17px
}
#search_form.voicetron .btn_search{
color:#71767a
}
You can use an input type of image as your submit button:
<input type="image" src="/my/image/location.png" />
Instead of styling up a submit button. As far as I know, the input type of image replicates the submit behaviour of a submit button.
Add this to btn_search iconify class of css and specify an image.
background: url("your_url.png") no-repeat scroll 0 0 transparent;
You have set input value="s" so change it to value="" and add background image for that button
#search_form.voicetron .btn_search{
color:#71767a;
background-image:url('http://findicons.com/files/icons/1389/g5_system/16/toolbar_find.png');
background-repeat:no-repeat;
}
Js Fiddle
You can simply treat the button as a block element and remove the text with
text-indent:-9999px;
then set a background image.
You probably also want to add
cursor:pointer;
As it doesn't look like a button at the moment.

Position absolute css is not working in input tag

hi the problem is that i have given position absolute to a input but i just find that absolute position is not working in input tag can anyone know?
i just wanna my layout liquid by positioning that's why i use this
here is my Html code:
<div id="savevalue">
<input type="text" name="name" id="name" class="inpt" />
<input type="button" value="Submit" class="btn" />
</div>
and here is css code:
.inpt{
background:#fff;
border:1px solid #ccc;
height:30px;
font-size:18px;
position:absolute;
left:0;
right:100px;
}
.btn{
height:30px;
background:#333;
border:1px solid #222;
font-size:18px;
color:#fff;
padding:0 15px;
position:absolute;
right:0;
}
yes it works fine by using
width: -moz-available
thanks to every one

Left margin is different in all browsers?

Using CSS3 I am trying to display search box with glass image. I am doing it basically by placing a image on text box and setting its left-margin. My code is here:
<body>
<form id="header-search">
<input type="text" class="searchbox" /><input type="submit" class="button" value="" />
</form>
</body>
#header-search{overflow:auto;}
#header-search input.searchbox
{
border-bottom-left-radius:5px;
-webkit-border-bottom-left-radius:5px;
-moz-border-bottom-left-radius:5px;
border-top-left-radius:5px;
-webkit-top-left-radius:5px;
-moz-left-radius:5px;
border:1px solid #8e8e8e;
background-color:white;
height:16px;
padding:4px;
padding-left:28px;
padding-right:10px;
color:#4a4a4a;
float:left;
}
#header-search input.button{
border:0px dashed red;
padding:0;
margin:0 0 0 -185px;
width:24px;
height:24px;
background:transparent url(../images/SearchImage.png) center center no-repeat;
float:left;
}
UPDATE
I am not using em rather px
I have tried different css reset.
please see image for details difference.
I have done this code in new css/ html file where there is no other line of code.
Using position:absolute seems to be a more reliable approach for this kind of thing.
HTML
<form id="header-search">
<div class='relative'>
<input type="text" class="searchbox" /><input type="submit" class="button" value="" />
</div>
</form>
CSS
.relative {
position:relative;
}
.relative .button {
position:absolute;
left: 20px;
z-index:1;
}
You may want to make this css more specific to this search input rather than all .button's etc
Its because you are not specifying a width of your search input box.
If you do that, you method will work.
Else, of course, the better way is to use position:absolute to position your button.
This will ensure the layout across all browsers.
If you want to place image for search input box , you can try this http://jsfiddle.net/HmKZQ/1/
If you need the button for click then you can try this
http://jsfiddle.net/HmKZQ/3/

How to put web form elements on a new line?

How to place "input" elements on new lines? In the above example all elements are placed sequentially, ie lable->input->lable->input, etc.
/* ----------- My Form ----------- */
.myform{
margin:0 auto;
padding:14px;
}
#stylized{
border-width:1px;
border-style:solid;
border-color:#b7ddf2;
background:#ebf4fb;
}
#stylized h1 {
font-size:14px;
font-weight:bold;
margin-bottom:8px;
border-width:1px;
border-style:solid;
border-color:#b7ddf2;
padding-bottom:10px;
}
#stylized label{
display:block;
font-size:11px;
font-weight:bold;
text-align:right;
float:left;
}
#stylized input{
float:left;
font-size:11px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:70px;
margin:2px 0 20px 10px;
}
/* --------- End of Form --------- */
<div id="stylized" class="myform">
<form id="form" name="form" method="post" action="index.html">
<h1>Data</h1>
<label>Name: </label>
<input type="text" name="name" id="name"/>
<label>Email: </label>
<input type="text" name="email" id="email"/>
<label>Password: </label>
<input type="text" name="password" id="password"/>
</form>
</div>
#stylized input{
display: block;
font-size:11px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:70px;
margin:2px 0 20px 10px;
}
This will put every input on a new line.
- Removed "float: left", added "display: block".
I put them under list tags and it worked without changing styles and using a break tag is obsolete
<ul>
<li><input type = "text" name = "selection" value = "text1" /> Text1</li>
<li><input type = "text" name = "selection" value = "text2" /> Text2</li>
</ul>
Have you tried anything as simple as
<label>Name: </label><br>
<input type="text" name="name" id="name"/>
<label>Email: </label><br>
<input type="text" name="email" id="email"/>
My guess is user1359163's anwswer will help, though you might care to know why: using float effectively removes the element out of the document's normal flow, a bit like changing the z-index, allowing the element to flow over div borders, labels, spans and... 'ignore' clear styles.
The element behaves as if it floats over the other elements, so in that respect, it stays clear of the left and right of all other elements that don't float.
I'm no CSS expert, but this way of looking at it has helped me a lot in solving issues with mangled layouts I've encountered when using the float, clear and z-index styles.
You prevent new lines when selecting a floating layout with enough room for all elements.
Try this:
Sample
http://jsfiddle.net/8yZff/
#stylized label{
font-size:11px;
font-weight:bold;
text-align:right;
}
#stylized input{
font-size:11px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:70px;
margin:2px 0 20px 10px;
display: block;
}
Here is JsFiddle for that...
Edit :
#stylized label{
font-size:11px;
font-weight:bold;
text-align:right;
}
#stylized input{
display:block;
font-size:11px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:70px;
margin:2px 0 20px 10px;
}​
For tabular data, such as an array of label/field pairs, use a table. You will find styling much easier, and nonstyled appearance much better.