title: Closable <div> not working on Chrome browser
body: <p>I am implementing a closable <code>&lt;div&gt;</code> using pure CSS and not Javascript.</p>
  
  <p><strong>HTML and CSS:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
  &lt;style&gt;
    div.messages 
    {
      padding: 10px;
      background-image: none;
      border: 1px solid transparent;
      border-color: #bce8a1;
      border-radius: 5px;
      width: 300px;
    }
  
    div.messages:before
    {
      content: "\274C";
      float: right;
      cursor: pointer;
    }
  
    div.messages:active
    {
      height: 0px;
      display: none;
    }
  &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
  &lt;div class= "messages"&gt;
        In publishing and graphic design, lorem ipsum is a filler text commonly used to demonstrate the graphic elements of a document or visual presentation. Replacing meaningful content that could be distracting with placeholder text may allow viewers to focus on graphic aspects such as font, typography, and page layout. It also reduces the need for the designer to come up with meaningful text, as they can instead use hastily generated lorem ipsum text.
  &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The code works (sort of) but am having a few notes that I would like to ask for help with</p>
  
  <ol>
  <li>The close works OK on Firefox; Chrome appears to close also but the <code>&lt;div&gt;</code> reappears as soon as the mouse is released</li>
  <li>The <code>&lt;div&gt;</code> blinks whenever I click anywhere within its bounds. How do I make it remain showing?</li>
  </ol>