semantic-ui styling input not working

Question

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.

deadwards · Accepted Answer · 2016-03-05 12:06:23Z

1

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

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.

answered Mar 5, 2016 at 12:06

deadwards

2,1381 gold badge16 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

samayo Over a year ago

Yup, this answers it. .item input.dictionary[type="text"]{border:red} did the job, though I did override other classes, but did not get any problems as this one, I guess I unknowingly made specific references. Anyway, thanks.

Collectives™ on Stack Overflow

semantic-ui styling input not working

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related