HTML and CSS Reference
In-Depth Information
form#add-movie {
margin-right: 40px;
}
}
The next thing to do is to style the forms. So open the _forms.scss file. The first
thing that you will want to do is set the box sizing for all of your form elements
so that any padding or borders added form part of the overall width. The
following line will use the box-sizing mixin to achieve this.
input, select, textarea, button {
@include box-sizing(border-box);
}
You will then need to style the text inputs, you can do this using the new CSS3
attribute selector rather than the old way of adding CSS classes to every text
input element. As you can see from the code snippet below, the text input below
has a 1 pixel black border and has a 5 pixel padding whilst the submit input
simply has a 10 pixel padding. There are no submit buttons used in the
application so it makes no sense in styling it yet.
input[type="text"] {
border: 1px solid #000000;
padding: 5px;
}
At present there is only one input element that should span the full width of its
parent element. You may want to add more elements like this in the future, so
it's a good idea to turn this into a CSS class that can be re-used.
input.full-width {
width: 100%;
}
By adding a left margin of 80px (greater or equal to the width of the logo) to the
search form, any content within the form will appear next to the logo.
form#add-movie {
margin-left: 80px;
}
This is a much better solution than floating the add-movie form as it will no
longer be able to have the full width of it's parent task bar element without using
JavaScript to calculate the size it should be.
The code below simply styles the search field. As you can see, background-size
is used for the first time here. The background-size property allows you to
