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