Laying the CSS3 Foundations - Learn HTML5 and JavaScript for Android - page 167

specify how big the background should be in pixels, or as a percentage of the
element the background is being added to.
input.search {
padding-left: 30px;
background: url('../img/search.png') 5px 50% no-repeat transparent;
background-size: auto 50%;
border: none;
border-bottom: 1px solid #BF2628;
color: #FFFFFF;
font-size: 1.5em;
}
The background-size property accepts a width and a height, both properties
can be different units. For instance, the width has been set to auto and the
height has been set to 50% in this example. This allows the height to be 50% of
the height of the element but the width will adjust in proportion to the height of
the background image so that it doesn't appear distorted.
The following styles use vendor specific pseudo's. -webkit-input-placeholder
and -moz-placeholder allow you to style the placeholder text used on input
elements. For instance, the background for the search box is transparent on a
blue background, so the default grey colour is barely visible. The text needs to
be white, so the placeholder pseudo's allow you to customize the way the
placeholder text is presented.
input.search::-webkit-input-placeholder, input.search::-moz-placeholder {
color: rgba(255, 255, 255, 0.5);
}
Although this will not be visible immedietly on Android 4, the style below will
show a loading indicator in the search box whilst movies are being searched for
in the background.
input.search.loading {
background-image: url('../img/loading.gif');
}
Your final forms SASS file should look like the code below.
input, select, textarea, button {
@include box-sizing(border-box);
}
input[type="text"] {
border: 1px solid #000000;
padding: 5px;
}