title: How do I style the alert box with CSS?
body: <p>-- Update --i have read a lot on the subject tried a few scripts and needed help to find out what you can or cant do. Community answered it all and the following is a good starting point. (answers here extracted from community below, thank you)</p>
  
  <ol>
  <li><p>YOU CAN NOT OVERIDE DEFAULT STYLE OF ALERT. It is produced by your client (eg. chrome firefox etc)</p></li>
  <li><p>you can use jquery instead. Instead of using a script like:</p>
  
  <p>function check_domain_input() {
      var domain_val = document.getElementsByName('domain');
      if (domain_val[0].value.length > 0) {
                  return true;
          }
          alert('Please enter a domain name to search for.');
          return false;
  }</p></li>
  </ol>
  
  <p>which makes the client (firefox chrome etc) produce an alert box.</p>
  
  <p>2b. You tell the code if somethings needs to happen on a event load jquery alertbox which you can make pretty: (Answered by Jonathan Payne and created by Jonathan Payne. Thank you)</p>
  
  <pre><code>&lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.8.21/themes/base/jquery-ui.css" type="text/css" media="all" /&gt;
  
  &lt;div onclick="check_domain_input()"&gt;Click&lt;/div&gt;
  
  &lt;div id="dialog" title="Attention!" style="display:none"&gt;
      Please enter a domain name to search for.
  &lt;/div&gt;
  
  &lt;script&gt;
      function check_domain_input()
      {        
          $( "#dialog" ).dialog(); // Shows the new alert box.
  
          var domain_val = document.getElementsByName('domain');
  
          if (domain_val[0].value.length &gt; 0)
          {
              return true;
          }
  
          $( "#dialog" ).dialog();
  
          return false;
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>Check out the jsFiddle here: <a href="http://jsfiddle.net/8cypx/12/" rel="nofollow">http://jsfiddle.net/8cypx/12/</a></p>