JSFiddle - React, Tailwind, and code Playground

by Kir V

HTML

<div class="itemFeature">
  <label class="itemValue">
    <input type="radio" name="feature[199_3_2]" value="1">
    <span class="featureValue" style="background-color:#FF0000;">
      <span></span>
    </span>
  </label>
  <label class="itemValue">
    <input type="radio" name="feature[199_3_2]" value="1">
    <span class="featureValue" style="background-color:#0055FF;">
      <span></span>
    </span>
  </label>
  <label class="itemValue">
    <input type="radio" name="feature[199_3_2]" value="1">
    <span class="featureValue" style="background-color:#00AA00;">
      <span></span>
    </span>
  </label>
  <label class="itemValue">
    <input type="radio" name="feature[199_3_2]" value="1">
    <span class="featureValue" style="background-color:#FFAAFF;">
      <span></span>
    </span>
  </label>
  <label class="itemValue">
    <input type="radio" name="feature[199_3_2]" value="1">
    <span class="featureValue" style="background-color:#FFFFFF;">
      <span></span>
    </span>
  </label>
  <label class="itemValue">
    <input type="radio" name="feature[199_3_2]" value="1">
    <span class="featureValue" style="background-color:#000000;">
      <span></span>
    </span>
  </label>
</div>

CSS

.itemFeature {
  padding:10px;
}

.itemValue {
    margin: 0 1px 5px 0;
    width: 25px;
    height: 25px;
}

.itemValue input {
    display: none;
}

.featureValue {
    width: 25px;
    height: 25px;
        cursor: pointer;
    display: inline-block;
    border:1px solid transparent;
    padding: 10px 10px;
    background-color: #fff;
    line-height: 1;
    text-align: center;
    font-size: 16px;
    font-weight: normal;
    color: #3d4547;
    margin-right:3px;
}

.itemValue input:checked + .featureValue {
    border: 1px solid #fff;
    /* background-image: url(img-mod.png); */
    background-repeat: no-repeat;
    background-position: 50% 50%;
    /* border: 1px solid #e9e9e9; */
    box-shadow: 0px 0px 0px 2px #ff324e;
}

JavaScript

$('.itemValue ').each(function(){
		var thiss = this;
    var colors = $('.featureValue',thiss).css('background-color');
    var arr_colors = colors.replace("rgb(",'').replace(")",'').split(',');
    
    if(arr_colors[0] > 239 && arr_colors[1] > 239 && arr_colors[2] > 239) {
        $('.featureValue',thiss).css({'box-shadow':'inset 0 0 4px 0 rgba(61, 69, 71, 0.5)', 'border':'none'});
        $('input',thiss).click(function(){
        	if($(this).is(':checked')){
        		//alert('Hello!');	
        		$('.featureValue',thiss).css({'box-shadow':'inset 0 0 4px 0 rgba(61, 69, 71, 0.5), 0px 0px 0px 2px #ff324e', 'border':'1px solid #fff'});	
        }
        });
    }
});