Harvard Extension School
CSCI E-12 Fundamentals of Web Site Development | Fall 2019

## input:focus

Example 4.33 - input:focus pseudo-class - Example 4.33 (Without Styles) |
<p>Form illustrating <code>input:focus</code></p><form method="post" action="http://cscie12.dce.harvard.edu/echo" enctype="application/x-www-form-urlencoded"> First name: <input type="firstname"/><br/> Last name: <input type="lastname"/><br/> Email: <input type="email"/><br/><input type="submit"/></form>input:focus { background-color: #ffc; border: medium solid orange; }

- Markup
- Style
- Screenshot

     <p>Form illustrating<code>input:focus</code></p>
    <form method="post" action="http://cscie12.dce.harvard.edu/echo">
    First name:
    <input type="firstname"/><br/>Last name:
    <input type="lastname"/><br/>Email:
    <input type="email"/><br/>
    <input type="submit"/>
    </form>

In `style` element (`<style type="text/css">`) within `head` element:

    input:focus {
      background-color: #ffc;
      border: medium solid orange;
    }

Copyright © David Heitmeyer