HTML and CSS Reference
In-Depth Information
label input:active,label input:focus {
border-color: #e06f00;
background-color: #fff;
outline: none;
label input:hover { background-color: #fff; }
This code overrides browser default behavior and replaces it with a custom highlight. Worth noting is the
input::-moz-focus-inner rule; this addresses a behavior in Firefox that causes the input to get a small dotted line on
the inside of the input when it is active.
if you override default browser styles, make sure you replace them with styles of your own. users who
navigate the Web with their keyboards rely on the :focus and :active states to see where the cursor currently rests,
so removing those states altogether will have a negative effect on the user experience.
After the styles are overridden, reload the page in your browser and use the Tab key to navigate through the form.
The inputs now get highlighted with orange when they're active (see Figure 7-11 ), and the submit buttons turn orange
when they have focus or when hovered over (see Figure 7-12 ).
Figure 7-11. A text input that has focus is now highlighted with orange
Figure 7-12. The submit button turns orange when hovered or focused
Adding Media Queries
The media queries for the home page stay fairly bare-bones. On tablets, you can still fit the forms side by side if they
shrink a bit, and on handheld devices they should stack one on top of the other.
The “join a room” form should be on top because it's shorter and because it's more likely to be used (more people
are likely to be attending than presenting).
Search WWH ::

Custom Search