How to change checkbox s border style in CSS

Question

How can I change checkbox  input  border s style  I ve put border 1px solid  1e5180 upon it  but in FireFox 3 5  nothing happens

User · Answer

You should use  -moz-appearance none  -webkit-appearance none  -o-appearance none    Then you get rid of the default checkbox image style and can style it  Anyway a border will still be there in Firefox

User · Answer

put it in a div and add border to the div

User · Answer

I m outdated I know   But a little workaround would be to put your checkbox inside a label tag  then style the label with a border    lt label class  hasborder  gt  lt input type  checkbox    gt  lt  label gt    then style the label    hasborder   border 1px solid  F00

User · Answer

lt div style  border-style  solid width 13px  gt       lt input type  checkbox  name  mycheck  style  margin 0 padding 0   gt      lt  input gt    lt  div gt

User · Answer

Here is a pure CSS  no images  cross-browser solution based on Martin s Custom Checkboxes and Radio Buttons with CSS3 LINK  http   martinivanov net 2012 12 21 imageless-custom-checkboxes-and-radio-buttons-with-css3-revisited   Here is a jsFiddle  http   jsfiddle net DJRavine od26wL6n   I have tested this on the following browsers    FireFox  41 0 2   42  Google Chrome  46 0 2490 80 m  Opera  33 0 1990 43  Internet Explorer  11 0 10240 16431  Update Versions  11 0 22   Microsoft Edge  20 10240 16384 0  Safari Mobile iPhone iOS9  601 1 46     x000D   x000D  label  x000D  input type  radio     span  x000D  input type  radio     span  before  x000D  label  x000D  input type  checkbox     span  x000D  input type  checkbox     span  before x000D    x000D      display  inline-block  x000D      vertical-align  middle  x000D    x000D    x000D  label    x000D  label   x000D    x000D      cursor  pointer  x000D    x000D    x000D  input type  radio    x000D  input type  checkbox   x000D    x000D      opacity  0  x000D      position  absolute  x000D    x000D    x000D  input type  radio     span  x000D  input type  checkbox     span x000D    x000D      font  normal 11px 14px Arial  Sans-serif  x000D      color   333  x000D    x000D    x000D  label hover span  before  x000D  label hover span  before x000D    x000D      -moz-box-shadow  0 0 2px  ccc  x000D      -webkit-box-shadow  0 0 2px  ccc  x000D      box-shadow  0 0 2px  ccc  x000D    x000D    x000D  label hover span  x000D  label hover span x000D    x000D      color   000  x000D    x000D    x000D  input type  radio     span  before  x000D  input type  checkbox     span  before x000D    x000D      content      x000D      width  12px  x000D      height  12px  x000D      margin  0 4px 0 0  x000D      border  solid 1px  a8a8a8  x000D      line-height  14px  x000D      text-align  center  x000D        x000D      -moz-border-radius  100   x000D      -webkit-border-radius  100   x000D      border-radius  100   x000D        x000D      background   f6f6f6  x000D      background  -moz-radial-gradient  f6f6f6   dfdfdf   x000D      background  -webkit-radial-gradient  f6f6f6   dfdfdf   x000D      background  -ms-radial-gradient  f6f6f6   dfdfdf   x000D      background  -o-radial-gradient  f6f6f6   dfdfdf   x000D      background  radial-gradient  f6f6f6   dfdfdf   x000D    x000D    x000D  input type  radio   checked   span  before  x000D  input type  checkbox   checked   span  before x000D    x000D      color   666  x000D    x000D    x000D  input type  radio   disabled   span  x000D  input type  checkbox   disabled   span x000D    x000D      cursor  default  x000D        x000D      -moz-opacity   4  x000D      -webkit-opacity   4  x000D      opacity   4  x000D    x000D    x000D  input type  checkbox     span  before x000D    x000D      -moz-border-radius  2px  x000D      -webkit-border-radius  2px  x000D      border-radius  2px  x000D    x000D    x000D  input type  radio   checked   span  before x000D    x000D      content    2022   x000D      font-size  30px  x000D      margin-top  -1px  x000D    x000D    x000D  input type  checkbox   checked   span  before x000D    x000D      content    2714   x000D      font-size  12px  x000D    x000D   x000D   x000D   x000D  input class  blue     span  before x000D    x000D      border  solid 1px blue  x000D      background   B2DBFF  x000D      background  -moz-radial-gradient  B2DBFF   dfdfdf   x000D      background  -webkit-radial-gradient  B2DBFF   dfdfdf   x000D      background  -ms-radial-gradient  B2DBFF   dfdfdf   x000D      background  -o-radial-gradient  B2DBFF   dfdfdf   x000D      background  radial-gradient  B2DBFF   dfdfdf   x000D    x000D  input class  blue   checked   span  before x000D    x000D      color  darkblue  x000D    x000D   x000D   x000D   x000D  input class  red     span  before x000D    x000D      border  solid 1px red  x000D      background   FF9593  x000D      background  -moz-radial-gradient  FF9593   dfdfdf   x000D      background  -webkit-radial-gradient  FF9593   dfdfdf   x000D      background  -ms-radial-gradient  FF9593   dfdfdf   x000D      background  -o-radial-gradient  FF9593   dfdfdf   x000D      background  radial-gradient  FF9593   dfdfdf   x000D    x000D  input class  red   checked   span  before x000D    x000D      color  darkred  x000D    x000D    lt label gt  lt input type  radio  checked  checked  name  radios-01    gt  lt span gt checked radio button lt  span gt  lt  label gt  x000D    lt label gt  lt input type  radio  name  radios-01    gt  lt span gt unchecked radio button lt  span gt  lt  label gt  x000D    lt label gt  lt input type  radio  name  radios-01  disabled  disabled    gt  lt span gt disabled radio button lt  span gt  lt  label gt  x000D   x000D   lt br  gt  x000D   x000D    lt label gt  lt input type  radio  checked  checked  name  radios-02   class  blue    gt  lt span gt checked radio button lt  span gt  lt  label gt  x000D    lt label gt  lt input type  radio  name  radios-02  class  blue    gt  lt span gt unchecked radio button lt  span gt  lt  label gt  x000D    lt label gt  lt input type  radio  name  radios-02  disabled  disabled  class  blue    gt  lt span gt disabled radio button lt  span gt  lt  label gt  x000D   x000D   lt br  gt  x000D   x000D    lt label gt  lt input type  radio  checked  checked  name  radios-03   class  red    gt  lt span gt checked radio button lt  span gt  lt  label gt  x000D    lt label gt  lt input type  radio  name  radios-03  class  red    gt  lt span gt unchecked radio button lt  span gt  lt  label gt  x000D    lt label gt  lt input type  radio  name  radios-03  disabled  disabled  class  red    gt  lt span gt disabled radio button lt  span gt  lt  label gt  x000D   x000D   lt br  gt  x000D    x000D   lt label gt  lt input type  checkbox  checked  checked  name  checkbox-01    gt  lt span gt selected checkbox lt  span gt  lt  label gt  x000D   lt label gt  lt input type  checkbox  name  checkbox-02    gt  lt span gt unselected checkbox lt  span gt  lt  label gt  x000D   lt label gt  lt input type  checkbox  name  checkbox-03  disabled  disabled    gt  lt span gt disabled checkbox lt  span gt  lt  label gt  x000D   x000D   lt br  gt  x000D    x000D   lt label gt  lt input type  checkbox  checked  checked  name  checkbox-01  class  blue    gt  lt span gt selected checkbox lt  span gt  lt  label gt  x000D   lt label gt  lt input type  checkbox  name  checkbox-02  class  blue    gt  lt span gt unselected checkbox lt  span gt  lt  label gt  x000D   lt label gt  lt input type  checkbox  name  checkbox-03  disabled  disabled  class  blue    gt  lt span gt disabled checkbox lt  span gt  lt  label gt  x000D   x000D   lt br  gt  x000D    x000D   lt label gt  lt input type  checkbox  checked  checked  name  checkbox-01  class  red    gt  lt span gt selected checkbox lt  span gt  lt  label gt  x000D   lt label gt  lt input type  checkbox  name  checkbox-02  class  red    gt  lt span gt unselected checkbox lt  span gt  lt  label gt  x000D   lt label gt  lt input type  checkbox  name  checkbox-03  disabled  disabled  class  red    gt  lt span gt disabled checkbox lt  span gt  lt  label gt  x000D   x000D   x000D

User · Answer

If something happens in any browser I d be surprised  This is one of those outstanding form elements that browsers tend not to let you style that much  and that people usually try to replace with javascript so they can style code something to look and act like a checkbox

User · Answer

You can use box shadows to fake a border   -webkit-box-shadow  0px 0px 0px 1px rgba 255 0 0 1   -moz-box-shadow  0px 0px 0px 1px rgba 255 0 0 1   box-shadow  0px 0px 0px 1px rgba 255 0 0 1

User · Answer

x000D   x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt head gt  x000D   lt style gt   x000D   x000D   abc123 x000D    x000D   -webkit-appearance none  x000D      width  14px  x000D      height  14px  x000D      display  inline-block  x000D      background   FFFFFF  x000D   border  1px solid rgba 220 220 225 1   x000D    x000D   abc123 after   x000D    content      x000D    display  inline-block  x000D    position  relative  x000D    top  -3px  x000D    left  4px  x000D    width  3px  x000D    height  5px  x000D    border-bottom  1px solid  fff  x000D    border-right  1px solid  fff  x000D    -webkit-transform  rotate 45deg   x000D    x000D   x000D  input type checkbox  checked     x000D      background   327DFF  x000D      outline  none  x000D      border  1px solid rgba 50 125 255 1   x000D    x000D  input focus input active   x000D   outline  none  x000D    x000D   x000D  input hover   x000D     border  1px solid rgba 50 125 255 1   x000D    x000D   x000D   lt  style gt  x000D   lt  head gt  x000D   lt body gt  x000D   x000D   lt input class  abc123  type  checkbox  gt  lt  input gt  x000D   x000D   x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

Styling checkboxes  and many other input elements for that mater  is not really possible with pure css if you want to drastically change the visual appearance   Your best bet is to implement something like jqTransform does which actually replaces you inputs with images and applies javascript behaviour to it to mimic a checkbox  or other element for that matter

User · Answer

Here s my version that uses FontAwesome for checkbox ticker  I think FontAwesome is used by almost everybody so it s safe to assume you have it too  Not tested in IE Edge and I don t think anyone cares    x000D   x000D  input type checkbox    x000D   -moz-appearance none  x000D   -webkit-appearance none  x000D   -o-appearance none  x000D   outline  none  x000D   content  none   x000D    x000D   x000D  input type checkbox  before   x000D   font-family   FontAwesome   x000D      content    f00c   x000D      font-size  15px  x000D      color  transparent  important  x000D      background   fef2e0  x000D      display  block  x000D      width  15px  x000D      height  15px  x000D      border  1px solid black  x000D      margin-right  7px  x000D    x000D   x000D  input type checkbox  checked before   x000D   x000D   color  black  important  x000D    x000D   lt link href  https   cdnjs cloudflare com ajax libs font-awesome 4 7 0 css font-awesome css  rel  stylesheet   gt  x000D   x000D   lt input type  checkbox  gt  x000D   x000D   x000D

User · Answer

No  you still can t style the checkbox itself  but I  finally  figured out how to style an illusion  while keeping the functionality of clicking a checkbox  It means that you can toggle it even if the cursor isn t perfectly still without risking selecting text or triggering drag-and-drop  The example is using a span  quot button quot  as well as some text in a label  but it gives you the idea of how you can make the checkbox invisible and draw anything behind it  This solution probably also fits radio buttons  The following works in IE9  FF30 0 and Chrome 40 0 2214 91 and is just a basic example  You can still use it in combination with background images and pseudo-elements  http   jsfiddle net o0xo13yL 1   x000D   x000D  label       display  inline-block      position  relative     needed for checkbox absolute positioning        background-color   eee      padding   5rem      border  1px solid  000      border-radius   375rem      font-family   Courier New       font-size  1rem      line-height  1rem     label  gt  input type  checkbox         display  block      position  absolute     remove it from the flow        width  100       height  100       margin  - 5rem     negative the padding of label to cover the  button         cursor  pointer      opacity  0     make it transparent        z-index  666     place it on top of everything else       label  gt  input type  checkbox     span       display  inline-block      width  1rem      height  1rem      border  1px solid  000      margin-right   5rem     label  gt  input type  checkbox   checked   span       background-color   666    x000D   lt label gt       lt input type  checkbox    gt       lt span gt  amp nbsp  lt  span gt Label text  lt  label gt  x000D   x000D   x000D

User · Answer

I suggest using  outline  instead of  border   For example  outline  1px solid  1e5180

User · Answer

Here is a simple way  to use before or after pseudo elements   classes    input type checkbox        position  relative     input type checkbox  after       position  absolute      top  0      left  0         Above three lines allow the checkbox after position at checkbox s position        content          width  32px      height  32px      z-index  1     This allows the after overlap the checkbox           Anything you want

User · Answer

For Firefox  Chrome and Safari  nothing happens  For IE the border is applied outside the checkbox  not as part of the checkbox   and the  quot fancy quot  shading effect in the checkbox is gone  displayed as an oldfashioned checkbox   For Opera the border style is actually applying the border on the checkbox element  Opera also handles other stylings on the checkbox better than other browsers  color is applied as the color of the tick  background-color is applied as background color inside the checkbox  IE applies the background as if the checkbox was inside a  lt div gt  with background    Conclusion The easiest solution is to wrap the checkbox inside a  lt div gt  like others have suggested  If you want to completely control the appearance you will have to go with the advanced image javascript approach  also meantiond by others

[html] How to change checkbox's border style in CSS?

Examples related to html

Examples related to css