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

Popular posts from this blog

php - Calling a template part from a post -

Firefox SVG shape not printing when it has stroke -

How to mention the localhost in android -