title: Semantic overriding my dropdown menu making it big
body: <p>I have a drop down menu that semantic-ui overrides as a semantic-ui drop down menu although i removed every class related to semantic-ui. It inserts a div to contain the whole  and apply semantic styling.
  My problem is that semantic drop down is wide and i need it to be small, so I tried many workarounds to change the size or remove semantic's control all together. The only thing that seemed to work was using Jquery to remove the elements that semantic inserts. Which is a lousy way to do it, and which also my team condemned.</p>
  
  <p>To give you some context, I am changing the navbar to make it responsive, that's why i'm removing semantic classes from the navbar and using custom css classes and I'm using it with Vue.js  </p>
  
  <p>Here's the source drop down code: </p>
  
  <pre><code>&lt;a style="padding:6px 0px !important;"&gt;
            &lt;select class="language-select" id="locale-dropdown" v-model="locale"&gt;
              &lt;option value="en"&gt;En&lt;/option&gt;
              &lt;option value="ar"&gt;ع&lt;/option&gt;
            &lt;/select&gt;
        &lt;/a&gt;
  </code></pre>
  
  <p>Below is the actual code i got by using inspect in chrome:</p>
  
  <pre><code>&lt;a data-v-65731896="" style="padding: 6px 0px !important;"&gt;
    &lt;div class="selection ui dropdown" tabindex="0"&gt;
      &lt;select data-v-65731896="" id="locale-dropdown" class="language-select"&gt;
        &lt;option data-v-65731896="" value="en"&gt;En&lt;/option&gt;
        &lt;option data-v-65731896="" value="ar"&gt;ع&lt;/option&gt;
      &lt;/select&gt;
      &lt;i class="dropdown icon"&gt;&lt;/i&gt;
      &lt;div class="text"&gt;En&lt;/div&gt;
      &lt;div class="menu" tabindex="-1"&gt;
        &lt;div class="item active selected" data-value="en"&gt;En&lt;/div&gt;
        &lt;div class="item" data-value="ar"&gt;ع&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>Jquery code used to remove elements:</p>
  
  <pre><code>    mounted () {    
      $('.ui.search.dropdown.selection').removeClass('ui search dropdown selection')
          $('.search').remove()
          $('.text').remove()
          $('.menu').remove()
          $('.dropdown.icon').remove()
      }
  </code></pre>
  
  <p>css that should be applied -but doesn't-:</p>
  
  <pre><code>.language-select{
      background-color:#fff;
      padding: 5px 5px;
      width: 20px;
    }
  </code></pre>