Other Form Elements

Style Textarea

By default, a <textarea> can be resized with a "grabber" in the bottom right corner. To remove the grabber, set the resize property to none:

<textarea name="firstname" style="background-color:#f8f8f8;width:100%;padding: 12px 20px;resize:none;height:150px;box-sizing: border-box;border:2px solid #ccc;border-radius:4px;"> Some text... </textarea>

Example

textarea
{
  width: 100%;
  height: 150px;
  padding: 12px 20px;

box-sizing: border-box;
  border: 2px solid #ccc;

border-radius: 4px;
  background-color: #f8f8f8;
  resize: none;

}

Style a Dropdown Menu

<form class="test"> <select id="country" name="country" style="background-color:#f1f1f1;border:none;"> <option value="usa">Australia</option> <option value="usa">Canada</option> <option value="usa">USA</option> </select> </form>

Example

select
{
  width: 100%;
  padding: 16px 20px;

border: none;
  border-radius: 4px;
  background-color: #f1f1f1;

}

Style Form Buttons

Form buttons of type "button", "submit" and "reset" can also be styled with CSS:

<input type="button" value="Button" class="button" style="cursor: pointer;"> <input type="button" value="Button" class="button" style="width:100%;cursor: pointer;">

Example

input[type=button], input[type=submit], input[type=reset]
{
  background-color: #04AA6D;
  border:
none;
  color: white;
  padding:
16px 32px;
  text-decoration: none;

margin: 4px 2px;
  cursor: pointer;

}

/* Tip: use width: 100% for full-width buttons */

Tip: For more information about how to style buttons, read our CSS Buttons Tutorial.

CSS Responsive Form

The following example uses CSS media queries to create a responsive form. You will learn more about media queries in a later chapter.

When the screen is less than 600px wide, we make the labels and input fields stack on top of each other, instead of next to each other.

Resize the screen to see the form layout change!

<iframe src="trycss_form_responsive_ifr.htm" style="margin-left:-8px;border:none;width:100%;height:535px;"></iframe>