0

So I have a project and on one page I would like the input boxes glow (when clicked on) to be of a certain color and on the other page I would like the input boxes glow to be of a different color. I understand within the bootstrap.css file I can modify this code:

 .form-control:focus {
    border-color: #76323F;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(118,50, 63, 1);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(118, 50, 63, 1);
}

to get the color I want (I have already done this). But now when an input is clicked I want to have a different color glow depending on which page Im on. How would I do this?

randyMoss1994
  • 105
  • 1
  • 3
  • 10
  • You could add a class to the body tag based on what page you are on and then cascade your CSS based on that body class. – Jennifer Goncalves Jul 03 '17 at 15:59
  • Add a new class to your stylesheet which overrides the box-shadow on elements you add the class to? Something like ```.form-control.light-shadow:focus {box-shadow: ...}``` – Ben Guest Jul 03 '17 at 15:59

3 Answers3

1

you could use jquery

$("#button").click(function() { 
$("#button").addClass('button-clicked'); 
 \});

.button-clicked { //you can add this for every page with the color you want 
background: red; <br/>
}

And don't forget to refer to the jquery.js

emilia
  • 11
  • 3
1

Try to add:

.form-control:active {
  background:red !important; //or without important if there is no need to use it
}

If You want set different color for many inputs, add unique id or class for .form-control

Wordica
  • 2,427
  • 3
  • 31
  • 51
0

So what worked for me was figuring out how to override bootstrap. Understanding the numerical weights of each selector was very useful. This stackoverflow post is what solved my problem: best way to override bootstrap css

randyMoss1994
  • 105
  • 1
  • 3
  • 10