HTML
<div class="setting-list-extend" title="">
<div class="pencil-width-container">
<span class="pencil-width-title title">线条宽度</span>
<div class="zm-pencil-width-radio-container" >
#设置input 属性hidden对该input进行隐藏，或者通过display:none也可以
<input class="zm-pencil-width-radio s" type="radio" name="pencil-size" id="pencil-radio-s" value="6" checked onclick="pencilInputChange(this.value,this.id)">
#借助label for标签通过id绑定input ，这样在点击label时实际就是点击了input
<label for="pencil-radio-s" ></label>
<input class="zm-pencil-width-radio m" type="radio" name="pencil-size" id="pencil-radio-m" value="12" onclick="pencilInputChange(this.value,this.id)">
<label for="pencil-radio-m" ></label>
<input class="zm-pencil-width-radio l" type="radio" name="pencil-size" id="pencil-radio-l" value="18" onclick="pencilInputChange(this.value,this.id)">
<label for="pencil-radio-l"></label>
<input class="zm-pencil-width-radio xl" type="radio" name="pencil-size" id="pencil-radio-xl" value="24" onclick="pencilInputChange(this.value,this.id)">
<label for="pencil-radio-xl"></label>
</div>
<div class="zm-pencil-width-custom-container">
<button type="button" class="font-size-option zm-pencil-custom-button">自定义</button>
<input class="zm-settinglist-input" id="zm-pencil-width-textfield" type="text" placeholder="1-100" onkeydown="pencilTextChange(this.value,this.id)">
<span class="zm-pencil-width-custom-symbol">px</span>
</div>
</div>
<div class="eraser-width-container">
<span class="eraser-width-title title">橡皮擦大小</span>
<div class="zm-eraser-width-radio-container">
<input class="zm-eraser-width-radio s" type="radio" name="eraser-size" id="eraser-radio-s" value="6" checked onclick="eraserInputChange(this.value,this.id)">
<label for="eraser-radio-s" ></label>
<input class="zm-eraser-width-radio m" type="radio" name="eraser-size" id="eraser-radio-m" value="12" onclick="eraserInputChange(this.value,this.id)">
<label for="eraser-radio-m"></label>
<input class="zm-eraser-width-radio l" type="radio" name="eraser-size" id="eraser-radio-l" value="18" onclick="eraserInputChange(this.value,this.id)">
<label for="eraser-radio-l" ></label>
<input class="zm-eraser-width-radio xl" type="radio" name="eraser-size" id="eraser-radio-xl" value="24" onclick="eraserInputChange(this.value,this.id)">
<label for="eraser-radio-xl" ></label>
</div>
<div class="zm-eraser-width-custom-container">
<button type="button" class="font-size-option zm-eraser-custom-button" onclick="changeFontActive(this.classList)">自定义</button>
<input class="zm-settinglist-input" id="zm-eraser-width-textfield" type="text" name="eraser-size" placeholder="1-100" disabled="disabled" onkeydown="eraserTextChange(this.value,this.id)">
<span class="zm-eraser-width-custom-symbol">px</span>
</div>
</div>
</div>
CSS
<style type="text/css">
.setting-list-extend {
width: 200px;
height: 1000px;
}
.pencil-width-container,
.eraser-width-container {
background-color: #3e3e3e;
}
.pencil-width-container .title,
.eraser-width-container .title {
display: block;
text-align: center;
text-shadow: 2px 2px 2px rgba(41,41,41,1);
font-size: 18px;
color: #FFF;
padding-top: 20px;
}
.zm-pencil-width-radio-container,
.zm-eraser-width-radio-container {
padding-top: 10px;
text-align: center;
}
.zm-pencil-width-radio,
.zm-eraser-width-radio {
display: none;
width: 34px;
height: 34px;
}
.zm-pencil-width-radio + label,
.zm-eraser-width-radio + label {
display: inline-block;
position: relative;
cursor: pointer;
vertical-align: middle;
background-color: #cecece;
width: 24px;
height: 24px;
border-radius: 50%;
border-style: solid;
border-color: #3e3e3e;
}
.zm-pencil-width-radio + label:before,
.zm-eraser-width-radio + label:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
z-index: 100;
width: 0;
height: 0;
border-radius: 50%;
/*background: #f1f1f1;*/
box-sizing: border-box;-box;
/*-webkit-transition: all 0.05s ease-in;*/
/*transition: all 0.05s ease-in;*/
}
.zm-pencil-width-radio:checked + label,
.zm-eraser-width-radio:checked + label {
background: #059acb;
}
.zm-pencil-width-radio:checked + label::before,
.zm-eraser-width-radio:checked + label::before {
content: '';
position: absolute;
z-index: 100;
background: #f1f1f1;
border-radius:100%;
}
.s + label {
width: 6px;
height: 6px;
border-width: 14px;
border-radius: 50%;
}
.s:checked + label {
width: 14px;
height: 14px;
border-width: 10px;
border-radius: 40%;
}
.s:checked + label::before {
top: 29%;
left: 29%;
width: 42%;
height: 42%;
}
.m + label {
width: 12px;
height: 12px;
border-width: 11px;
border-radius: 50%;
}
.m:checked + label {
width: 20px;
height: 20px;
border-width: 7px;
border-radius: 35%;
}
.m:checked + label::before {
top: 20%;
left: 20%;
width: 60%;
height: 60%;
}
.l + label{
width: 18px;
height: 18px;
border-width: 8px;
border-radius: 50%;
}
.l:checked + label {
width: 26px;
height: 26px;
border-width: 4px;
border-radius: 30%;
}
.l:checked + label::before {
top: 15.5%;
left: 15.5%;
width: 69%;
height: 69%;
}
.xl + label{
width: 24px;
height: 24px;
border-width: 5px;
border-radius: 50%;
}
.xl:checked + label {
width: 32px;
height: 32px;
border-width: 1px;
border-radius: 25%;
}
.xl:checked + label::before {
top: 12.5%;
left: 12.5%;
width: 75%;
height: 75%;
}
.zm-pencil-width-custom-container,
.zm-eraser-width-custom-container {
padding-top: 10px;
text-align: center;
padding-bottom: 10px;
}
.font-size-option {
width: 53px;
height: 23px;
padding: 3px 5px;
border: 1px solid rgba(41, 41, 41, 1);
margin-left: 5px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-box-flex:1;
-webkit-flex:1;
-moz-box-flex:1;
-ms-flex:1;
flex:1;
}
.font-size-option:hover {
color: #0077ff;
border-color: #0077ff;
}
.font-size-option:active {
color: #fff;
border-color: #0077ff;
background-color: #0077ff;
}
.font-size-option.active {
color: #fff;
border-color: #0077ff;
background-color: #0077ff;
}
.zm-settinglist-input {
width: 40px;
height: 16px;
text-align: center;
}
.zm-settinglist-input input::-webkit-input-placeholder {
color: #656565;
text-align: center;
}
.zm-settinglist-input input:-moz-placeholder {
color: #656565;
text-align: center;
}
.zm-settinglist-input input::-moz-placeholder {
color: #656565;
text-align: center;
}
.zm-settinglist-input input:-ms-input-placeholder {
col: #656565;
text-align: center;
}
.zm-pencil-width-custom-symbol,
.zm-eraser-width-custom-symbol {
color: white;
display: inline-block;
vertical-align: bottom;
}
</style>
JS
<script type="text/javascript">
var pencilWidth = 6;
function pencilInputChange(value,id) {
pencilWidth = value;
document.getElementById('zm-pencil-width-textfield').value = '';
widthChange(pencilWidth);
}
function pencilTextChange(value,id) {
if (event.keyCode === 13) {
var radio = document.getElementsByClassName('zm-pencil-width-radio');
for (var i = 0; i < radio.length; i++) {
radio[i].checked = false;
// radio[i].removeAttribute('checked');
}
var textfield = document.getElementById(id);
textfield.blur();
pencilWidth = textfield.value;
widthChange(pencilWidth);
}
}
function eraserInputChange(value,id) {
pencilWidth = value;
document.getElementById('zm-eraser-width-textfield').value = '';
document.getElementsByClassName('zm-eraser-custom-button')[0].classList.remove('active');
document.getElementById('zm-eraser-width-textfield').disabled = 'disabled';
widthChange(pencilWidth);
}
function eraserTextChange(value,id) {
if (event.keyCode === 13) {
var radio = document.getElementsByClassName('zm-eraser-width-radio');
for (var i = 0; i < radio.length; i++) {
radio[i].checked = false;
// radio[i].removeAttribute('checked');
}
var textfield = document.getElementById(id);
textfield.blur();
pencilWidth = textfield.value;
widthChange(pencilWidth);
}
}
function widthChange(value) {
console.error(value);
}
function changeFontActive(value) {
value.add('active');
document.getElementById('zm-eraser-width-textfield').removeAttribute('disabled');
}
</script>
