diTii.com Digital News Hub

Sign up with your email address to be the first to know about latest news and more.

HTML5 WebKit Search Input

Sep062010

HTML5 WebKit Search Input

Chris Coyier posted an in-depth article going into new HTML5 input type to appease your curiosity. The HTML5 specifications actually says you don’t have to do much with it, but Webkit actually has a range of options. First, it visually distinguishes the input field with an inset border, rounded corners, and typographic controls. Chris has discovered that you actually can’t override the following visual properties on a search input with CSS:

input[type=search] {
  padding: 30px;            /* Overridden by padding: 1px; */
  font-family: Georgia;     /* Overridden by font: -webkit-small-control; */
  border: 5px solid black;  /* Overridden by border: 2px inset; */
  background: red;          /* Overridden by background-color: white; */
  line-height: 3;           /* Irrelevant, I guess */
}

With following can be styled in an HTML5 search input:

input[type=search] {
  color: red;
  text-align: right;
  cursor: pointer;
  display: block;
  width: 100%;
  letter-spacing: 4px;
  text-shadow: 0 0 2px black;
  word-spacing: 20px;
}

Chris also discovered a ‘results’ parameter that can be used on Webkit but is not in the HTML5 spec:

Final, result:

[Source: 1, 2]

Share This Story, Choose Your Platform!