我想使用HTML, CSS and jQuery显示一个优先级设置按钮，将优先级设置为高/中/低，如所附图片所示，并想在旁边的标签中完整显示所选优先级。有什么方法可以实现这一点吗？
我试了下面，但它的设计是不相似的，我在这里附上.

$(function() {
  $('input:radio[name=priority]').change(function() {
    var id = $(this).attr("id");
    $("#text").html($(this).val());

    $('label[for=' + id + ']').checked = true;
  });
});

[type="radio"]:checked + span:after {
border: none;
background-color: unset;
}
[type="radio"]:not(:checked) + span:before {
border: none;  
}

input[type="radio"] {
  width: 30px;
  height: 30px;
  border-radius: 15px;
  /*border: 2px solid #1FBED6;*/
  background-color: #F1F1F1;
  -webkit-appearance: none;
  /*to disable the default appearance of radio button*/
  -moz-appearance: none;
}

input[type="radio"]:focus {
  /*no need, if you don't disable default appearance*/
  outline: none;
  /*to remove the square border on focus*/
}

#h:checked {
  /*no need, if you don't disable default appearance*/
  background-color: red;
}

#m:checked {
  /*no need, if you don't disable default appearance*/
  background-color: orange;
}

#l:checked {
  /*no need, if you don't disable default appearance*/
  background-color: lightgreen;
}

input[type="radio"]:checked~span:first-of-type {
  color: white;
}

label span:first-of-type {
  position: relative;
  left: -27px;
  font-size: 15px;
  color: black;
}

label span {
  position: relative;
  top: -12px;
}

<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<label><input type="radio" id="h" name="priority" value="High priority"/><span>H</span></label>
<label><input type="radio" id="m" name="priority" value="Moderate priority"/><span>M</span></label>
<label><input type="radio" id="l" name="priority" value="Low priority"/><span>L</span></label>
<div id="text"> </div>

当我在我的代码中实现时，它看起来如下所示：