html – 从无线电输入中删除边界

前端之家收集整理的这篇文章主要介绍了html – 从无线电输入中删除边界前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想使用图像而不是常规的无线电输入.


我这样做:

  1. input[type="radio"]{
  2. content:url('/images/new-home-page/CheckBox.png');
  3. height:3vh;
  4. width:3vh;
  5. }
  6. input[type="radio"]:checked{
  7. content:url('/images/new-home-page/checkedCheckBox.png');
  8. }

不幸的是,他们周围有圈子.我试图使用border:none或text-decoration:none,但不能帮助.有人可以帮我吗

他们现在看起来像这样:

解决方法

我会请求您使用CSS的外观属性,该属性负责这样的组件.所以设置外观:没有一个会显示出来:对于组件的外观,这是你需要的.你很好地使用这一点的CSS来使组件不显示,同时保持元素在视图中:
  1. -webkit-appearance: none;
  2. -moz-appearance: none;
  3. -ms-appearance: none;
  4. -o-appearance: none;
  5. appearance: none;

片段

  1. input {
  2. content: url('http://i.stack.imgur.com/M3EkO.png');
  3. height: 16px;
  4. width: 16px;
  5. -webkit-appearance: none;
  6. -moz-appearance: none;
  7. appearance: none;
  8. }
  9. input:checked {
  10. content: url('http://i.stack.imgur.com/Ialva.png');
  11. }
  1. CheckBox:
  2. <input type="checkBox" name="" id="" /> <br />
  3. Radios:
  4. <input type="radio" name="Hi" id="" />
  5. <input type="radio" name="Hi" id="" />

输出http://output.jsbin.com/digebimolu/1

猜你在找的HTML相关文章