<div class="tags-select"> <label class="tag-select"> <input type="radio" name="version" value="1"> <span class="name">全网通(2GB 16GB)</span> </label> <label class="tag-select"> <input type="radio" name="version" value="2"> <span class="name">全网通(3GB 32GB)</span> </label> <label class="tag-select"> <input type="radio" name="version" value="3" disabled> <span class="name">联通版(2GB 16GB)</span> </label> </div>
.tags-select { font-size: 0; > .tag-select { display: inline-block; font-size: 14px; margin: 5px; position: relative; font-weight: normal; .name { display: block; line-height: 20px; padding: 8px 10px; border: 1px solid #ccc; cursor: pointer; } input[type="radio"] { position: absolute; opacity: 0; z-index: -1; &:checked + .name { border-color: #e3393c; } &:disabled + .name { background: #eee; color: #999; cursor: not-allowed; } } } }
codepen在线示例:https://codepen.io/chendanaliyuntubiao/pen/YzqpxLO