css select the box (frame) plus 2px border, the box (frame) will not shake when selected


<!-- 领导人物多选,开始 -->
<style type="text/css">
    .leader_sel {
     
      margin:10px;}
        .leader_sel label {
     
      display: inline-block; border: 1px dashed #cccccc; padding: 5px 10px; margin: 5px; cursor: pointer; }
        .leader_sel .selected {
     
      border: 2px solid #00b20f; padding: 4px 9px !important; }
</style>
<div class="leader_sel">
    <label>曹良臣</label>
    <label>欧研修</label>
    <label>石达开</label>
    <label>范仲淹</label>
</div>
<script type="text/javascript">
    $(".leader_sel label").click(function () {
     
     
        var have = $(this).hasClass("selected");
        if (have) {
     
     
            $(this).removeClass("selected");
        } else {
     
     
            $(this).addClass("selected");
        }
    });
</script>
<!-- 领导人物多选,结束 -->

Insert picture description here

Guess you like

Origin blog.csdn.net/u011511086/article/details/112610991