custom styling textboxes and submit buttons?

MuGeN · 27 Oct 2009 at 15:37

can anyone recommend a decent reliable way to style form components? i have a search box and submit button which at present simply has a background (set in css) and had its borders etc removed... this sort of works but gives different results in different browsers with regards to the positioning on the text...

whats the best way to use bespoke graphics for form elements and have it output correctly on different browsers?

TwoSaints · 28 Oct 2009 at 10:22

For the submit button it is like this:

<input type="image" src="submit.gif" alt="Submit" />

taken from: http://www.w3schools.com/TAGS/att_input_type.asp (about half way down the examples)

Dj_Jestar · 28 Oct 2009 at 15:39

I usually opt for:

Code:

<input type="submit" id="submit" value="Submit" />

Code:

input#submit {
  background-color: transparent;
  background-image: url(/image.foo);
  background-repeat: no-repeat;
  width: x;
  height: y;
  border: none;
}

whitecrook · 28 Oct 2009 at 21:19

http://24ways.org/2008/shiny-happy-buttons

Gives some in fo on it. IME very few browsers support all of the features.

Russinating · 28 Oct 2009 at 22:03

whitecrook said:
http://24ways.org/2008/shiny-happy-buttons

Gives some in fo on it. IME very few browsers support all of the features.

Chrome really doesn't like the semi-transparent border on that site!

GuitarCrazyo · 28 Oct 2009 at 23:05

custom styling textboxes and submit buttons

You can leave the button value with some reasonable text and style it as follows:
Code:theButtonSelector text-indent:-9999em;overflow:hidden;background:urlpathToImage no-repeat center center;On other hand if you use type="image" not recommended , you can empty the value attribute and add "alt" so those with no images loaded would understand buttons purpose.