Q:

semantic-ui styling input not working

I have this simple nav. 
<div class="ui attached stackable menu">
  <div class="ui container">
    <a class="item">
       Home
    </a>
    <div class="ui simple dropdown item">
      More
      <i class="dropdown icon"></i>
      <div class="menu">
        <a class="item"><i class="edit icon"></i> Edit Profile</a>
        <a class="item"><i class="globe icon"></i> Choose Language</a>
        <a class="item"><i class="settings icon"></i> Account Settings</a>
      </div>
    </div>
    <div class="item">
      <div class="ui input"><input placeholder="Search..." type="text" class="dictionary"></div>
    </div>  
  </div>
</div>

I am trying to add styling to <div class="ui input"><input placeholder="Search..." type="text" class="dictionary"></div> but no styles are being applied, anything .. for example 
input.dictionary{
  border:1px solid red;
}

does not have any effect on it. 

A:

OK So what's happening is that Semantic UI is overriding your custom style:
http://i.imgur.com/ayRs3Kx.png
As you can see your custom CSS is crossed out in chrome developer tools.
You have two choices

Make your CSS Selector more specific
Include !important after your style e.g.  border:1px solid red !important;

Option 1 is more preferable. I've made a JSFiddle here with an example. By adding red-border I've made the style more specific than the Semantic UI CSS.
When you find your CSS does not seem to be working, use the dev tools to see if it shows up, and if it does what is overriding it.

