CSS issue under Google Chrome (Textbox and Button)

Question

I have an issue with the positioning of a textbox and button, where it doesn't display correctly under Chrome.

Here is an example from each browser, as you can see the textbox under Chrome is pushed out of position.

Internet Explorer/Firefox

Chrome

html:

<div id="divSearch">
   <input type="text" id="txtSearch" placeholder=" Search..."/>
   <input type="submit" id="btnSearch" value=""/>
</div>`

css:

input[type=text]{
    width: 200px;
    height: 24px;
    border: none;
    border-radius: 3px 0px 0px 3px;
    -webkit-border-radius: 3px 0px 0px 3px;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 0;
}

input[type="submit"]{
    border: none;
    border-radius: 0px 3px 3px 0px;
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-border-radius: 0px 3px 3px 0px;
    width: 32px;
    height: 24px;
    background: url(../img/search_button.png) no-repeat;
    background-color: white;
    background-position: 10px 5px;
}

#divSearch{
float: right;
width: 300px;
height: 40px;
white-space: nowrap;
margin-right: 50px;
}

Now if I remove the height from input[type="submit"] the positioning is fine except the button is now the wrong size.

I can't work out why the height of the button causes the issue. Any advice on how to fix it?

Thanks

Possible duplicate of [HTML input button css-height not working on Safari and Chrome](http://stackoverflow.com/questions/12450776/html-input-button-css-height-not-working-on-safari-and-chrome) — Daniel Netto, Apr 15 '16 at 06:32

score 3 · Accepted Answer · edited Jun 28 '18 at 09:32

3

Add the following code. It should work:

input[type=text]{
  float:left
}

edited Jun 28 '18 at 09:32

Edric

24,639
13
81
91

answered Apr 15 '16 at 05:59

Anil wagh

273
1
14

That worked perfectly, such an easy fix thank you. Do you know why the float left helped? – user2168287 Apr 15 '16 at 06:19
As floating rule says, if you are floating an element then each and every Element should be floated. you used flow for only for #divSearch and not to input elements. Anyways this was the one trick to solve the problem using float. – Anil wagh Apr 19 '16 at 03:08

int32_t · Answer 2 · 2016-04-15T13:13:54.427

0

Make the button value non-empty will resolve this.

<input type="submit" id="btnSearch" value="&nbsp;"/>

The root cause is the button has no text baseline.

edited Apr 15 '16 at 13:13

answered Apr 15 '16 at 13:00

int32_t

5,774
1
22
20

CSS issue under Google Chrome (Textbox and Button)

2 Answers2