Skip to main content
se eliminaron 349 caracteres en el cuerpo
Origen Enlace
Pablo Lozano
  • 49.9k
  • 8
  • 55
  • 92
.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>      
.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>      
.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>
Origen Enlace
MarianoF
  • 559
  • 4
  • 19

Como dejar seleccionado un color / css

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>