Como puedo dejar seleccionado algún color con el bordeado gris?
.color-picker {
font-size: 0;
}
.color-picker__item {
display: inline-block;
}
.color-picker__item + .color-picker__item {
margin-left: 10px;
}
.color-picker__item:hover {
cursor: pointer;
}
.color-picker__input {
display: none;
}
.color-picker__input:checked + .color-picker__color:after {
content: '';
}
.color-picker__input:disabled + .color-picker__color {
opacity: 0.5;
}
.color-picker__input:disabled + .color-picker__color:hover {
cursor: not-allowed;
}
.color-picker__color .color-picker__input:active{
background-color: red
}
.color-picker__color {
position: relative;
display: block;
width: 12px;
height: 12px;
border-radius: 50px!important;
padding: 7px;
margin: 2px;
}
.color-picker__color:hover {
cursor: pointer;
border-radius: 50px
}
.color-picker__color:after {
pointer-events: none;
position: absolute;
top: -13px;
left: -13px;
width: calc(100% + 4px);
height: calc(100% + 4px);
border: 2px solid #b5b2b2;
content: none;
border-radius: 67px!important;
width: 30px;
margin: 9px;
height: 30px;
}
.color-picker__color--verde {
background: #4f7a2d;
}
.color-picker__color--white {
background: #FFFFFF;
}
.color-picker__color--celeste {
background: #009bdb;
}
.color-picker__color--azul {
background: #0066ad;
}
.color-picker__color--rojo {
background: #bf0811;
}
.color-picker__color--gris {
background: #9e9e9e;
}
.color-picker__color--negro {
background: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><b>Color:</b> Verde</label>
<div class="color-picker mt-1">
<div class="color-picker__item">
<input id="input1" type="radio" class="color-picker__input" name="color-input" value="1"/>
<label for="input1" class="color-picker__color color-picker__color--white"></label>
</div>
<div class="color-picker__item">
<input id="input2" type="radio" class="color-picker__input" name="color-input" value="2"/>
<label for="input2" class="color-picker__color color-picker__color--verde"></label>
</div>
<div class="color-picker__item">
<input id="input3" type="radio" class="color-picker__input" name="color-input" value="3"/>
<label for="input3" class="color-picker__color color-picker__color--celeste"></label>
</div>
<div class="color-picker__item">
<input id="input4" type="radio" class="color-picker__input" name="color-input" value="4"/>
<label for="input4" class="color-picker__color color-picker__color--azul"></label>
</div>
<div class="color-picker__item">
<input id="input5" type="radio" class="color-picker__input" name="color-input" value="5"/>
<label for="input5" class="color-picker__color color-picker__color--rojo"></label>
</div>
<div class="color-picker__item">
<input id="input6" type="radio" class="color-picker__input" name="color-input" value="6"/>
<label for="input6" class="color-picker__color color-picker__color--gris"></label>
</div>
<div class="color-picker__item">
<input id="input7" type="radio" class="color-picker__input" name="color-input" value="7"/>
<label for="input7" class="color-picker__color color-picker__color--negro"></label>
</div>
</div>