Search box not displayed correctly in Chrome

What OS are you using?

Sorry, I meant to ask what version of Chrome also - is this by any chance a Canary or DEV build?

I can confirm issue
OS W7 64bit
chrome 16.0.912.41 beta-m
Sky 7.x-2.2
Drupal 7.9

search is showing too small in this Nov-09 version, it was working fine in the previous ones the first attachment was the way it used to be
you can see in my site tradestation programmer

This bug aims Bartik 7.9 also, fresh install drupal 7.9.

same here

some hack, seems to work

block.css

#search-form input#edit-keys,
#block-search-form .form-item-search-block-form input {
  float: left; /* LTR */
  font-size: 1em;
  height: 25px; 
  margin-right: 5px;
  width: 62%;
}

forms.css

input.form-text,
input[type=text],
select[multiple=multiple] {
  background-color: #fff;
  border: solid 0px #e6e4de;
  padding:0px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

I'm using chrome 15 on both xp sp3 and debian 6 x64, and it does the same thing on both locations, looks fine in firefox. Same result in Chromium.

I made a commit to the DEV version which should probably fix this, I don't really want to remove padding from all inputs aka #10, lets see if this works in DEV for you guys, looking ok for me on Chrome.

I just made the commit, so might take some hours to show in the actual download.

Same bug here, even after using the dev mentioned in #12.

Firefox:

Chrome:

When I analyze the html/css in firebug, I see the oddest thing in Chrome:

Note how
<div class="form-item form-type-textfield form-item-search-block-form">
is dimmed (i.e., invisible to the browser). This isn't the case in Firefox.

When I analyze that div in Firebug and look under the "Computed" tab, it says that it has a width of 0 and a height of 0 under "Box Model."

I cannot, for the life of me, figure out what is going on here.

He he, yeah, this issue is driving me around the bend, the form styles are so mad in this theme, I'm sure there's a cascade issue here somewhere.

Actually I spent ages on it, I mean AGES, and getting it right in all browsers has driven me nuts. I'm about ready to dump all the form styles out of the theme and do it all again from scratch.

The problems began when I was being lazy about porting the theme and sort of munged the code from the 7.x-1.x theme and AT's core theme styles, this for the most part worked, but this dam search field is not playing ball. Grrrrrrr.

Jeff, you may end up saving yourself time just going from scratch, LOL. The odd thing is that this bug is identical in Safari and Chrome, but not in FF. This is like trying to find a cure for cancer.

I solved the search input field not aligning with the search icon making them the same height:

.form-item-search-block-form input{
height: 25px !important;
}

This is just a quick and dirty solution for something that isn't too critical to our design. No warranty included of course ;)

Cheers!
Mike
ASIT, UCSB
www.asit.ucsb.edu

Of all browsers, Firefox filled in the div all the way, so I changed that to % height. Then to align the search icon, I just added some top padding.

.form-item-search-block-form input{
height: 1% !important;
}

#search-block-form input.form-submit, #search-form input.form-submit {
margin: 2px 0 0 0;
}

Again, down and dirty. This may not be the best way to do it.

appears fixed in 2.3 and the newest chrome on windows (16)

OK, so I will test out #16 and get it in there!

Hi,
Same issue in Chrome with the standard search block.
In my phptemplate, I have only removed this preprocess function:

function yourtheme_preprocess_search_block_form(&$vars) {
$vars['search_form'] = str_replace('type="text"', 'type="search"', $vars['search_form']);
}

So the type of the input is now "text", and it works fine.
Regards.

#21, yes I know this is the essence of the problem - the way browsers are rendering these new HTML5 input attributed elements is a huge pita, unfortunately we're in a transitional phase, I am two minds about removing it also, but would really rather succeed with CSS and have my cake and eat it to :)

I was able to fix this via css, found from a discussion here: http://css-tricks.com/webkit-html5-search-inputs/#comment-82402

input[type=search] {
   -moz-appearance:none;
   -webkit-appearance:none;
}

I can confirm that the CSS in #23 worked for me. Thanks!