1

Estoy queriendo dejar seleccionado un de los colores en este caso el verde, quería saber como puedo hacerlo?

.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>

1 respuesta 1

2

Simplemente agrega la propiedad checked="checked" al input que deseas dejar seleccionado:

.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" checked="checked"/>
    <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>

2
  • Buenisimo Levi, muchas gracias por el aporte
    – MarianoF
    Commented el 27 jun. 2018 a las 17:57
  • De nada. Saludos :) Commented el 27 jun. 2018 a las 18:42

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.