css制作的打勾（√）小图标和可输入的div、span

可输入span、div

span div {
	text-decoration: underline;
}
span:before, span:before {
	content: '  ';
	white-space: pre;
}
span:after,div:after {
	content: '  ';
	white-space: pre;
}
<span contenteditable="true">
   我是王
</span>
<div contenteditable="true">
   我是王
</div>

打钩图标

/**绿色勾*/
.greenicon-tick-checked {
    display: inline-block;
    position: relative;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #2ac845;
    line-height: 25px;
    cursor: pointer;
}
/**灰色勾*/
.grayicon-tick-uncheck {
    display: inline-block;
    position: relative;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #5f646e;
    cursor: pointer;
}
.greenicon-tick-checked:before, .greenicon-tick-checked:after,
.grayicon-tick-uncheck:before, .grayicon-tick-uncheck:after {
    content: '';
    pointer-events: none;
    position: absolute;
    color: white;
    border: 1px solid;
    background-color: white;
}
.greenicon-tick-checked:before,
.grayicon-tick-uncheck:before {
    width: 1px;
    height: 1px;
    left: 25%;
    top: 50%;
    transform: skew(0deg,50deg);
}
.greenicon-tick-checked:after,
.grayicon-tick-uncheck:after {
    width: 3px;
    height: 1px;
    left: 45%;
    top: 42%;
    transform: skew(0deg,-50deg);
}
<ol>
    <li><span>我是王</span><span class="greenicon-tick-checked"></span></li>
    <li><span>我是王</span><span class="greenicon-tick-checked"></span></li>
    <li><span>我是王</span><span class="greenicon-tick-checked"></span></li>
    <li><span>我是王</span><span class="grayicon-tick-uncheck"></span></li>
</ol>