title: Best way to style a TextBox in CSS
body: <p>I would like to hear what's the best thing to do with pure CSS.</p>
  
  <p><strong>The Situation:</strong></p>
  
  <p>I'm having a textbox in which i can search for specific items. Yet now i'm also having an advanced search with almost the same textbox yet the width of the advancedSearchTextbox is less than the default one.</p>
  
  <p><strong>My Question</strong></p>
  
  <p>What is the best way to style the textbox?</p>
  
  <p><strong>My Solution</strong></p>
  
  <p>I've fixed this now like this:</p>
  
  <pre><code>.defaultTextBox {
      padding: 0;
      height: 30px;
      position: relative;
      left: 0;
      outline: none;
      border: 1px solid #cdcdcd;
      border-color: rgba(0,0,0,.15);
      background-color: white;
      font-size: 16px;
  }
  .advancedSearchTextbox {
      width: 526px;
      margin-right: -4px;
  }
  </code></pre>
  
  <p>and then in the HTML it'd look something like this for the advancedSearchTextbox:</p>
  
  <pre><code>&lt;input type="text" class="defaultTextBox advancedSearchTextBox" /&gt;
  </code></pre>
  
  <p>Is this the best way to do it? Or are there any other options available? As for just 1 other textbox it's do-able but what if i need more textboxes on other pages?</p>
  
  <p>Thanks in advance :)!</p>