1

I have my angular application set up and everything is working. I am trying to add some custom css to input so I made a new file my.css

.myInvalid {
    border: 5px solid red;
}

I have added that file to my index.html and the file gets loaded but when I write <input type="text" class="myInvalid"/> there isn't any border around my input.

<!DOCTYPE html>

<html data-ng-app="MainApp">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="Scripts/angular.js"></script>

    <script src="Scripts/ui-bootstrap-0.4.0.js"></script>
    <script src="Scripts/ui-bootstrap-tpls-0.4.0.js"></script>
    <link href="Content/css/my.css" type="text/css" rel="stylesheet" />

    <link href="Content/assets/bootmetro/css/bootmetro.css" rel="stylesheet" />
    <link href="Content/assets/bootmetro/css/bootmetro-responsive.css" rel="stylesheet" />
    <link href="Content/assets/bootmetro/css/bootmetro-icons.css" rel="stylesheet" />
    <link href="Content/assets/bootmetro/css/bootmetro-ui-light.css" rel="stylesheet" />
    <script src="Scripts/jquery-1.9.1.js"></script>

</head>
<body>
    <div class="container-fluid">
        <div data-ng-view=""></div>
    </div>
   <input type="text" class="myInvalid"/>
</body>
</html>

If I write my css inline <input type="text" style="border: 5px solid red" /> everything works. The behavior is the same in all browsers. Any ideas?

partyelite
  • 822
  • 1
  • 15
  • 26
  • does firebug output errors? the only incorrect thing I see now is "type=text/css". it shouldn't be there according to http://www.w3.org/TR/html401/present/styles.html#h-14.6 – Eduard Gamonal Jul 18 '13 at 10:16
  • I have removed "type=text/css" but it didn't help. No errors in firebug. – partyelite Jul 18 '13 at 10:21
  • not even in the network tab? maybe you can move the line to the end of the header so that you are 100% sure that your rule is not overwriten – Eduard Gamonal Jul 18 '13 at 10:22
  • no errors in firebug.. GET my.css 200 OK :) I have moved the line to the end of the head and still no change – partyelite Jul 18 '13 at 10:27
  • when I comment out I get 5px border but it is grey. And I commented bootmetro-ui-light.css as well and now my boreder is showing.. I must point out that bootmetro.css files are loaded at the begining of the head and my.css is on the last line of the head. – partyelite Jul 18 '13 at 10:31
  • you can inspect the `input` element with Firebug to know what css rules are overwriting yours. – Eduard Gamonal Jul 18 '13 at 10:37
  • This is in no way an angular js question – rooftop Jul 18 '13 at 11:17
  • Try moving your css include line below the Bootstap line. If that doesn't work, try a more specific selector (i.e. making it "longer" and therefore higher in precedence) – Brendan Bullen Jul 18 '13 at 12:02

2 Answers2

1

You have to make sure that your selector is more specific than the bootstrap one,

Instead of .myInvalid use input[type='text'].myInvalid

Check out this answer for more about selector priority.

Community
  • 1
  • 1
Patsy Issa
  • 11,113
  • 4
  • 55
  • 74
-1

This sounds like a specificity problem. Do the other stylesheets you're including define styles for <input type="text">? If you define your style block as follows, I bet you see your red border:

.myInvalid {
    border: 5px solid red !important;
}

I'm not saying adding !important is the solution, but if it works you know your selector (.myInvalid) isn't specific enough to override other styles defined for this element.

You'll need to inspect your <input> from the browser and see what style declarations are matching it and overriding the properties you're trying to set. Then you can adjust your selector accordingly.

André Dion
  • 21,269
  • 7
  • 56
  • 60