Custom CSS not working when using bootstrap -
i have angular application set , working. trying add custom css input made new file my.css
.myinvalid {     border: 5px solid red; } i have added file index.html , file gets loaded when write  <input type="text" class="myinvalid"/> there isn't border around 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 write css inline <input type="text" style="border: 5px solid red" /> works. behavior same in browsers.  ideas?
you have make sure selector more specific bootstrap one,
instead of .myinvalid use input[type='text'].myinvalid 
check out this answer more selector priority.
Comments
Post a Comment