quiero cambiar el color de un “value” de una input usando css

publicado por: user138470

Creé una pequeña tabla para realizar un formulario.
La tabla contiene:

               Nombre: (casilla para agregar nombre)
               Teléfono: (+598 casilla para agregar número)

Como ven, en “teléfono” hay un número prescrito (hecho con value).
Lo que yo quiero es agregar un color específico a ese “+598” (ej: color rojo) y que al escribir los números restantes, estos, tengan otro color (ej:negro) y además que no se pueda borrar el “+598” (manteniendo el +598 dentro de la casilla claro).

Quedaría algo así lo que quiero:

                       Nombre: ( Juan Pepe)
                       Teléfono (+598 5454545554)

(con el +598 en rojo y sin poder borrarse y los otros números en negro)
Gracias de antemano

Probé mil formas distintas de cambiarlo usando css y ninguna funcionó.

Busqué en Internet y nada, ando bastante estresado.

<div id="Contenido">

<fieldset id="Disco2">

<legend>Insertar</legend>

 `<form id="Datos" action="Insertado.php" method="post">`

   `<table>`

<tr>

  `<td>Nombre:</td>`
  `<td><input id="datanom" name="nom" type="text"></td>`

</tr>

<tr>

  `<td>Teléfono:</td>`
  `<td><input id="datatel" name="tel" type="text" value="+598"></td>`

</tr>

CSS

input#datatel[value=+598] {

color:red;

}

solución

Emulando Campo <input> con un poco de CSS

Como ya han mencionado no se puede aplicar dos estilos de color al valor de un <input> sin embargo con un poco de imaginación podemos emular un campo <input> con las características planteadas por el OP.

Aquí dejo un ejemplo muy sencillo de como se puede hacer

_x000D_

_x000D_

#code {_x000D_
background-color:white;_x000D_
color:red;_x000D_
border-style: groove none groove groove;_x000D_
width:36px_x000D_
}_x000D_
#phone {_x000D_
border-style: groove groove groove none;_x000D_
}

_x000D_

Nombre: <input id="name"><br><br>_x000D_
Telefono: <input id="code" value="+958" disabled><input id="phone">

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published.