title: How to apply different css styles to two different form elements on the same page?
body: <p>I am trying to create a web page with a search bar that has it's own styling at the top and then a form later on in the page using django and crispy forms. Currently, the styling for my search bar applies to the styling for my form, and I don't want that. I would like to use bootstrap crispy forms to style the form and my own custom css to style the search bar. (The search bar is coded as a form with input.) </p>
  
  <p>I have tried reordering the links in the head of my html, bootstrap first, search bar second, and the other way around, and it didn't affect anything rather than screw up the positioning of my search bar. I have tried wrapping both forms in divs with seperate ids and seperate classes, and it also didn't work. I have tried giving an id to my custom search bar form. I am aware of CSS Specificity.</p>
  
  <p>I'm not sure how to make it happen so that I can completely separate the two. Help is appreciated.</p>
  
  <p>relevant html:</p>
  
  <pre><code>&lt;head&gt;
          ...
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /&gt;
      &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"&gt;
      &lt;link rel="stylesheet" href="{% static 'assets/css/main.css' %}" /&gt;
      &lt;link rel="stylesheet" href="{% static 'assets/css/search_bar.css' %}" /&gt;
      &lt;noscript&gt;&lt;link rel="stylesheet" href="{% static 'assets/css/noscript.css' %}" /&gt;&lt;/noscript&gt;    
  &lt;/head&gt;
  &lt;body&gt;
      ...
      &lt;div class="searchbar"&gt;
          &lt;form action=""&gt;
              &lt;input type="search"&gt;
              &lt;i class="fa fa-search"&gt;&lt;/i&gt;
          &lt;/form&gt;
      &lt;/div&gt;
      ...
      &lt;div class="spotlight"&gt;
          &lt;form action ="" method="POST"&gt;
              &lt;div class="form-group"&gt;
                  {% csrf_token %}
                  {% crispy form %}
              &lt;/div&gt;
          &lt;/form&gt;
      &lt;/div&gt;
      ...
  &lt;/body&gt;
  </code></pre>
  
  <p>And the custom css file I'm trying to only apply to the search bar:</p>
  
  <pre><code>.searchbar form {
      position: relative;
      top: 50%;
      left: 50%;
      width: 50px;
      height: 50px;
      transform: translate(-50%,-50%);
      transition: all 1s !important;
      background: white;
      box-sizing: border-box;
      border-radius: 25px;
      border: 4px solid white;
      padding: 5px;
  }
  .searchbar input{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;;
      height: 42.5px;
      line-height: 30px;
      outline: 0;
      border: 0;
      display: none;
      font-size: 1em;
      border-radius: 20px;
      padding: 0 20px;
  }
  .searchbar .fa{
      box-sizing: border-box;
      padding: 10px;
      width: 42.5px;
      height: 42.5px;
      position: absolute;
      top: 0;
      right: 0;
      border-radius: 50%;
      color: #07051a;
      text-align: center;
      font-size: 1.2em;
      transition: all 1s;
  }
  
  .searchbar form:hover{
      width: 300px;
      cursor: pointer;
  }
  
  .searchbar form:hover input{
      display: block;
      color: black;
  }
  
  .searchbar form:hover .fa{
      background: pink;
      color: white;
  }
  </code></pre>
  
  <p>EDIT: This is what I'd like the final UI to look like: <a href="https://i.imgur.com/82g36KY.png" rel="nofollow noreferrer">https://i.imgur.com/82g36KY.png</a></p>