Home/ Questions/Q 6323601
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T16:32:57+00:00

I’m trying to create a form where the background of the input fields are

  • 0

I’m trying to create a form where the background of the input fields are styled with a gradient background. It succeds for all <input> tags, but not for the <select> tag. Can this be done? Am I doing something wrong?

The CSS I’m using:

form#contact input[type="text"], input[type="url"], 
input[type="email"], input[type="tel"], textarea, select {
    margin: 3px 0 0 0;
    padding: 6px; 
    width: 260px; 
    font-family: arial, sans-serif; 
    font-size: 12px; 
    border: 1px solid #ccc;
    background: -webkit-gradient(linear, left top, left 15, from(#FFFFFF), color-stop(4%, #f4f4f4), to(#FFFFFF));
    background: -moz-linear-gradient(top, #FFFFFF, #f4f4f4 1px, #FFFFFF 15px);
}

See the image below.

See the image below

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Styling <select> is difficult since browsers try and render the control to match the OS. You could add -webkit-appearance: none; to enable the gradient but that will also remove the arrow.

    See Add gradient to select box w/ CSS3 in chrome? and Background Image for Select (dropdown) does not work in Chrome

    Or if you can use jQuery or Prototype, I highly recommend the excellent Chosen plugin in which the <select> is replaced by a dropdown that can be styled.

    Edit: I have to add the styling form elements is sometimes frowned upon. Eric Meyer’s article on the subject is good background reading.

    • 0