2

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>

3
  • Cuál es el problema? Yo veo que cuando seleccionas un color, se queda un borde alrededor hasta que selecciones otro. Commented el 26 jun. 2018 a las 13:19
  • Ahí yo veo todos radio buttons ¿por que no usas type="checkbox"? Commented el 26 jun. 2018 a las 13:25
  • lo que necesito es que uno de los colores tenga presionado y muestre el borde gris. como seleccionado
    – MarianoF
    Commented el 26 jun. 2018 a las 14:48

1 respuesta 1

1

Usa mejor checkbox, radio solo puede elegir solo una opcion, checkbox varias opciones, así:

.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="checkbox" 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="checkbox" 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="checkbox" 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="checkbox" 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="checkbox" 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="checkbox" 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="checkbox" class="color-picker__input" name="color-input" value="7"/>
    <label for="input7" class="color-picker__color color-picker__color--negro"></label>
  </div>										    
</div>

1
  • Hola Angel si lo que quiere es que por ej el verde quede seleccionado el color con el borde gris
    – MarianoF
    Commented el 26 jun. 2018 a las 14:48

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.