¿Cómo crear un selector de colores usando HTML, CSS y JavaScript?

¿Cómo crear un selector de colores usando HTML, CSS y JavaScript

En este artículo, le contaré una manera fácil de crear un selector de colores usando HTML5. Este selector se usa comúnmente en sitios web que tienen una función de selección de colores.

Inmediatamente, en HTML5, resulta que ya se proporciona un tipo de entrada que maneja la necesidad de elegir un color. Cómo hacerlo simple, es lo mismo que crear otro tipo de entrada.

<input type="color" value="#1DB8CE" id="colorPicker"/>

Cuando declaramos el color del tipo de entrada, cuando hacemos clic, el color de entrada traerá la opción. Por supuesto, sea cual sea el color que elijamos en la paleta, será el valor del propio elemento.

Índice de contenido

    Cómo crear un selector de colores usando HTML, CSS y JS

    Código HTML

    <div class="color-picker">
      <label for="colorPicker">
      <input type="color" value="#1DB8CE" id="colorPicker"/>
      </label>
    </div>

    Código CSS

    <style type="text/css">
     [type='color'] {
      -moz-appearance: none;
      -webkit-appearance: none;
      appearance: none;
      padding: 0;
      width: 11px;
      height: 11px;
      border: none;
    }
    
    [type='color']::-webkit-color-swatch-wrapper {
      padding: 0;
    }
    
    [type='color']::-webkit-color-swatch {
      border: none;
    }
    .color-picker {
     padding: 6px 11px;
      border-radius: 6px;
      border: 1px solid #ccc;
      background-color: #f7f7f7;
    }</style>

    Código JavaScript

    <script type="text/javascript">
    //<![CDATA[
    /* Color Picker JavaScript By SmartTechMukesh.Com */
    document.querySelectorAll('input[type=color]').forEach(function(picker) {
    
      var targetLabel = document.querySelector('label[for="' + picker.id + '"]'),
      codeArea = document.createElement('span');
      codeArea.innerHTML = picker.value;
      targetLabel.appendChild(codeArea);
      picker.addEventListener('change', function() {
        codeArea.innerHTML = picker.value;
        targetLabel.appendChild(codeArea);
      });
    });
      
    //]]>
    </script>

    Demostración

    Conclusión

    Esta es una manera fácil de crear un selector de color simple usando HTML, CSS y JavaScript que puede usar en cualquiera de sus proyectos de diseño web. Puede usar este código en su proyecto de diseño en cualquier lugar de blogger.com o cualquier otra plataforma como WordPress.

    En esta publicación, compartí cómo crear un selector de colores usando HTML, CSS y JS. Espero que este método de creación pueda ser muy útil para ti y tu blog.

    Deja una respuesta

    Tu dirección de correo electrónico no será publicada.

    Subir