时间戳

首页 > 解决方案 > 如何设置输入复选框选中箭头的样式？CSS

html - 如何设置输入复选框选中箭头的样式？CSS

问题描述

我已经创建了一个跨度和一个输入复选框，但无法弄清楚如何通过给定的设计来设置选中箭头的样式，这是选中复选框的位置：

在此处输入图像描述

HTML：

  <label class="form-label">
    <input id="checkbox" type="checkbox">
    <span>title</span>
  </label>

CSS：

 .form-label {
  display: inline-flex;
  cursor: pointer;
  position: relative;
  }

 .form-label > input {
  height: 20px;
  width: 20px;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
  border: 1px solid #CDCDCD;
  border-radius: 4px;
  outline: none;
  background-color: #ffffff;
  cursor: pointer;
  }

 .form-label > input:checked {
  border: 1px solid #000000;
  background-color: #ffffff;
  }

  .form-label > input:checked + span::before {
  content: '\2713';
  display: block;
  text-align: center;
  color: #000000;
  position: absolute;
  left: 4px;
  top: -1px;
  }

 .form-label > input:checked + span::before:focus {
  outline: none;
  }

为示例https://jsfiddle.net/ev2pxynL/1/创建了一个 Jsfiddle

任何帮助将不胜感激，一段时间以来一直在努力解决这个基本问题。我想完全按照设计创建箭头。

标签： htmlcsssass

解决方案

在您的复选框中，您使用的是预定义样式的内容。只需链接 fontawesome css 并更改内容

 .form-label > input:checked + span::before {
     content: '\f00c';
  }

或者只是谷歌如何在链接下方制作自定义复选框或结帐。 如何 - 自定义复选框

推荐阅读