Styling checkbox as square

Question

I am trying to customize my check box . In the jsfiddle where you can see the customized check box which is circle . I just want to make it a square and I need help to do it . Can someone help me. The fiddle link is http://jsfiddle.net/1aeur58f/125/

border-radius : 100%

Makes it a circle, how to make it as a square ??

How did I fail to try that.. Played with all the numbers except 0 :( — ani, Mar 06 '17 at 17:17
Hi, something like this https://lokesh-coder.github.io/pretty-checkbox/ ? — lokesh-coder, Mar 31 '17 at 17:24

score 1 · Answer 1 · answered Mar 06 '17 at 17:02

1

Just remove the border radius directives or set

 border-radius : 0;

answered Mar 06 '17 at 17:02

zoubida13

1,720
10
20

score 1 · Accepted Answer · answered Mar 06 '17 at 17:03

1

Delete the border-radius: 100px; property from the .checkboxFour label or set it to 0.

Jsfiddle

answered Mar 06 '17 at 17:03

kind user

34,867
6
60
74

i need your help.. i couldnt able to align the label next to checkbox. i tried adding seperate label with vertical-alignment : middle but nothing worked :( – ani Mar 07 '17 at 10:54
@ani Make a new question, post your whole code and give me the link! (: – kind user Mar 07 '17 at 10:55
question is posted http://stackoverflow.com/questions/42650324/customized-check-box-and-label-alignment – ani Mar 07 '17 at 14:04

Styling checkbox as square

2 Answers2