0

So, I've taken over an internal project and the previous build had issues regarding the styling of check boxes. I have fixed the issue in Chrome which is fine for us as its the only installed browser here but when this goes live some modules will be available to customers which is where things get sticky. This is the code I am using to style the check boxes in Chrome:

input[type=checkbox] {
  border-radius: 2px;
  cursor: pointer;
  margin-top: 1px;
  border: 1px solid #gray;
  background-color: white;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  width: 20px;
  height: 20px;
}
input[type=checkbox]:checked {
  background-color: #3FAE2A;
  border: 1px solid #3FAE2A;
}
input[type=checkbox] :hover {
  border: 1px solid #3FAE2A;
  -moz-transition: border-color 0.1s ease-out;
  -o-transition: border-color 0.1s ease-out;
  -webkit-transition: border-color 0.1s ease-out;
  transition: border-color 0.1s ease-out;
}

Now currently this works in the sense that the check boxes are functional across all browsers but only styled in Chrome, is there any way for me to just use css to get this to work across IE and Firefox? If not, where should I be looking?

cimmanon
  • 67,211
  • 17
  • 165
  • 171
Damien
  • 621
  • 1
  • 7
  • 17
  • 3
    Browsers style inputs in their own way. Best way is to lay something on top of it and style that and hide the original checkbox. – putvande Jul 17 '15 at 15:18
  • Use a label and style that: http://codepen.io/CreativeJuiz/pen/BiHzp – Pete Jul 17 '15 at 15:24
  • This is how I usually make styled checkboxes: https://codingwithspike.wordpress.com/2014/11/16/fancy-css-checkboxes-with-fontawesome/ – CodingWithSpike Jul 17 '15 at 15:33
  • @CodingWithSpike Cheers, thats a pretty useful walk through. I'll tackle that on Monday, 40 mins left at work and motivation is low haha – Damien Jul 17 '15 at 15:38
  • @Damien http://stackoverflow.com/questions/4148499/how-to-style-checkbox-using-css a complete guide on this topic. – halfzebra Jul 17 '15 at 17:34

0 Answers0