html - Why are my CSS styles overriding my inline styles? -

html - Why are my CSS styles overriding my inline styles? -

my <input type=image> inline width/height beingness overridden input styles. there way right this? or inline style not work in situation?

html:

<form id="search" name="search" form method="get" action="find_search.php"> <input type= "text" name= "q" value="" /> <input type="hidden" name= "cat" value="" /> <input type="hidden" name= "time" value="0" /> <input type="hidden" name="letter" value="" /> <input type="hidden" name="offset" value="0" /> <input type="hidden" name= "type" value="quick" /> <input type= "image" src="images/search_button.png" value="search" width="200" height="50" /> </form>

css:

input { width:50%; padding:0px; outline:none; height:36px; font-size:24px; }

you can accomplish using more specific css selectors input[type=text] , input[type=image]. if want height/width specified in question apply <input type="text">, this:

keep non-height/width properties in less specific input selector:

input { padding:0px; outline:none; font-size:24px; }

then utilize height/width properties in input[type=text] selector:

input[type=text] { width:50%; height:36px; }

then can add together differnet height/width input[type=image] selector:

input[type=image] { width: 200px; height: 50px; }

also, maintain in mind can create selectors more specific if utilize id of form in selectors, so:

#search input #search input[type=text] #search input[type=image]

html css