Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

input type=search don't accept height

Tags:

I'm trying to make an input type="search" tall but CSS don't affect it. My code is like this:

HTML:

<input type="search" />

CSS:

input{width:100%; height:100px;}

But it doesn't work. Take a look at fiddle here

like image 550
Mohsen Avatar asked Aug 20 '11 19:08

Mohsen


People also ask

How do you input field to height?

The height attribute specifies the height of the <input> element. Note: The height attribute is used only with <input type="image"> . Tip: Always specify both the height and width attributes for images. If height and width are set, the space required for the image is reserved when the page is loaded.

What is default height of input?

The input element by default is size="20" if this is not defined inline or a CSS style rule is attributed to it.

How do you change the size of an input tag?

1. Set width in HTML. In HTML, you can use the width attribute to set the width of an element. Alternatively, you can also use the size attribute to define the width of the <input> .

What is input type search?

Definition and Usage. The <input type="search"> defines a text field for entering a search string. Note: Remember to set a name for the search field, otherwise nothing will be submitted. The most common name for search inputs is q.


2 Answers

See http://trentwalton.com/2010/07/14/css-webkit-appearance/

Webkit defaults (hijacks) to using a native search field, but you can override it with:

-webkit-appearance:none;
like image 57
hooleyhoop Avatar answered Oct 15 '22 01:10

hooleyhoop


-webkit-appearance:textfield;
box-sizing: content-box;

http://tonibarrett.com/forcing-my-style-onto-input-typesearch/

this solved my problem

like image 43
Christian Haller Avatar answered Oct 14 '22 23:10

Christian Haller