title: list-style-item CSS is not applied to UL
body: <p>I can't get list-style-item to apply to my UL in chrome even though I'm setting <code>display</code> to <code>list-item</code> and suffixing with <code>!important</code>. I'm using Angular and bootstrap and am applying my CSS as the last <code>&lt;link&gt;</code> in the <code>&lt;head&gt;</code> - here's the HTML before Angular applies it's repeater:</p>
  
  <pre><code>&lt;ul class="shipping-list"&gt;
      &lt;li ng-repeat="todo in todos"&gt;
          &lt;select ng-model="todo.country"&gt;
              &lt;option&gt;Canada&lt;/option&gt;
              &lt;option&gt;United Kingdom&lt;/option&gt;
              &lt;option&gt;United States&lt;/option&gt;
          &lt;/select&gt;
          &lt;input type="text" ng-model="todo.text" ng-required="true"&gt;
          &lt;i class="fa fa-times" ng-click="deleteTodo(todo)" alt="Remove"&gt;&lt;/i&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;select ng-model="todoCountry"&gt;
              &lt;option&gt;Canada&lt;/option&gt;
              &lt;option&gt;United Kingdom&lt;/option&gt;
              &lt;option&gt;United States&lt;/option&gt;
          &lt;/select&gt;
          &lt;input type="text" ng-model="todoText"  size="30" placeholder="$shipping"&gt;
          &lt;button class="btn btn-primary" ng-click="addTodo()"&gt;Add&lt;/button&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>HTML after Angular applies it's repeater - Providing for completeness although I'm pretty sure this is not related to Angular use:</p>
  
  <pre><code>&lt;ul class="shipping-list"&gt;
    &lt;!-- ngRepeat: todo in todos --&gt;
    &lt;li ng-repeat="todo in todos" class="ng-scope"&gt;
      &lt;select ng-model="todo.country" class="ng-pristine ng-valid"&gt;
        &lt;option value="Canada"&gt;Canada&lt;/option&gt;
        &lt;option value="United Kingdom"&gt;United Kingdom&lt;/option&gt;
        &lt;option value="United States"&gt;United States&lt;/option&gt;
      &lt;/select&gt;
      &lt;input type="text" ng-model="todo.text" ng-required="true" class="ng-pristine ng-valid ng-valid-required" required="required"&gt;
      &lt;i class="fa fa-times" ng-click="deleteTodo(todo)" alt="Remove"&gt;&lt;/i&gt;
    &lt;/li&gt;&lt;!-- end ngRepeat: todo in todos --&gt;
    &lt;li ng-repeat="todo in todos" class="ng-scope"&gt;
      ...
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>//Shipping list
  ul.shipping-list {
    list-style-type: none !important;
    color: red;
    border: solid 1px red !important;
  }
  ul.shipping-list li {
    display:list-item !important;
    border: solid 1px red;    
  }
  ul.shipping-list input {
    color: red;
    background-color: cyan;  
    border: solid 1px red;
  }
  </code></pre>
  
  <p>The result is as follows - Note that list items still have bullets and there's no border on the UL:</p>
  
  <p><img src="https://i.stack.imgur.com/BKX80.png" alt="List Item style not applied"></p>