entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

2votos

Input de colores sin usar input type="color"

Me gustaría en un formulario que tengo tener un input donde el usuario pueda escribir el color en hexadecimal tal que #fff000 y también desplegar un color picker para así poder seleccionar el color que quiera si no sabe el hexadecimal exacto del mismo.

He buscado en google e input type="color" no vale porque no es soportado por todos los navegadores.

Alguna idea?

El formulario actual luce tal que así:

<form novalidate class="form1" id="userModify" name="userModify" enctype="multipart/form-data"  method="post" target="" action="save_changes.php">
<p>Personal Broker Infomation</p>
<ol>
<li>Email Address :<br/>
<input style="margin-bottom:10px" type="text" id="userEmailAddress" name="userEmailAddress" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$"  value="<?=$_SESSION['user'][6]?>"/>
</li>
<li>Full Name :<br/>
<input style="margin-bottom:10px" type="text" id="userFullName" name="userFullName" required value="<?=$_SESSION['user'][5]?>" />
</li>
<li>Telephone Number :<br/>
<input style="margin-bottom:10px" type="text" id="userTelephone" name="userTelephone" required value="<?=$_SESSION['user'][4]?>"/>
</li>
</ol>
<p>Corporate Broker Infomation</p>

<ol>
<li>Company Name :<br/>
<input style="margin-bottom:10px" type="text" id="userCompanyName" name="userCompanyName" required value="<?=$_SESSION['user'][0]?>"/>
</li>
<li>Logo :<br/>
<input style="margin-bottom:10px" type="file" name="userLogoFile" id="userLogoFile" required />
<br/>
(Current File)<br/>
<img src="../images/logos/<?=$_SESSION['user'][1]?>">
</li>
<li>Primary / Branding Colour : (HTML Color Code)<br/>
<!--AQUÍ INSERTAR UN COLOR PICKER QUE VALGA EN TODOS LOS NAVEGADORES-->
<input class="" style="margin-bottom:10px" type="text" value="<?=$_SESSION['user'][2]?>" name="userColour"  id="userColour" required />
</li>
</li>
<li>Regulatory Footer<br/>
<textarea style="width:400px; height:80px;" class="" style="margin-bottom:10px" type="text" name="userRegulatory"  id="userRegulatory" required><?=$_SESSION['user'][10]?> </textarea>
</li>
</ol>
<button id="saveInfo" class="submit proceed" type="submit">Save Changes</button>

</form>

1 Respuesta

3votos

carlossevi Puntos63580

Puedes utilizar alguna biblioteca de Javascript que te añada la funcionalidad. Buscando por "input html color picker" he encontrado jscolor con licencia GNU GPL license v3, aunque hay muchas similares.

Te copio cómo queda un ejemplo de código sencillo. Incluir la biblioteca:

<script src="jscolor.js"></script>

Crear un selector de color:

Color: <input class="jscolor" value="ab2567">

Date una vuelta por los resultados y busca la que mejor se adapte a tu proyecto.

1voto

ankeorum comentado

Yo lo encontré también, lo estoy usando.

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta