title: hover and focus pseudo-classes action
body: <p>I'm experimenting with <code>css</code> and I'm trying to add a dynamic pseudo-class in my selector. Here is the <code>HTML</code>-markup snippet.</p>
  <pre><code>&lt;div id=&quot;child&quot;&gt;
      &lt;input type=&quot;text&quot; id=&quot;text&quot;/&gt;
  &lt;/div&gt;
  </code></pre>
  <p>and it's corresponding <code>css</code>-style</p>
  <pre><code>input[type=&quot;text&quot;]{
      width: 150px;
      height: 25px;
  }
  input[type=&quot;text&quot;]:hover, input[type=&quot;text&quot;]:focus{
      border: 1px solid grey;
  }
  #child{
      padding: 5px;
      border: 20px solid;
      background: aqua;
      height: 50px;
      margin: 10px;
  }
  </code></pre>
  <p>Here is the <a href="http://jsfiddle.net/z78BN/5/" rel="nofollow noreferrer"><strong>JSFIDDLE</strong></a> example. So when the mouse hovers over the <code>text</code> element the size of the text element is reduced as follows:</p>
  <p><img src="https://i.stack.imgur.com/c0qJ3.png" alt="enter image description here" /></p>
  <p><img src="https://i.stack.imgur.com/2vp3s.png" alt="enter image description here" /></p>
  <p>Would anyone know why this reduction in size is occurring?</p>