如何使用CSS设置复选框的样式？

Question

如何在复选框中制作有吸引力的CSS。我不知道该怎么做因为我是css的新手。请检查我的代码。

  <div class="myform">
  <label title="myfrstchoice">
  <input type="checkbox" name="myfirstchoice">myfirstchoice</label>

  <label title="myfrstchoice">

  <input type="checkbox" name="mysecondchoice">mysecondchoice</label>             
  <label title="mythirdchoice">
    <input type="checkbox" name="mysecondchoice">mysecondchoice</label>                            

  </div>

这是以下的在线codepen代码： -

https://codepen.io/anon/pen/XEVqOX

Answer 1

有不同的方法可以做到这一点，但默认情况下，所有表单元素都会从浏览器中获取样式。

您可以使用appearance: none;覆盖这些样式，如this pen

所示

另一种解决方法是隐藏实际的复选框，并使用this pen中的css / images伪造其行为 wsschools使用相同的方法here