CODEWITHSUNDEEP
csssemantic-ui
samayo
samayo

Reputation: 16495

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.

Upvotes: 0

Views: 2151

Answers (1)

deadwards
deadwards

Reputation: 2118

OK So what's happening is that Semantic UI is overriding your custom style: https://i.sstatic.net/DjvdO.png

As you can see your custom CSS is crossed out in chrome developer tools.

You have two choices

  1. Make your CSS Selector more specific
  2. 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.

Upvotes: 1

Related Questions