¿Hay alguna forma de cambiar el valor de una entrada de texto (el texto predeterminado que se muestra) con css?¿Cambiar el valor de una entrada de texto con css?
Estoy optomizando un sitio para dispositivos móviles y quiero que el texto 'buscar en este sitio' se acorte a 'buscar'. Gracias
Eso realmente no es para lo que CSS es.
CSS es para diseñar su contenido; HTML es para el contenido real en sí.
Si necesita modificar el contenido después de cargar el HTML, entonces para eso es Javascript.
Así que la verdadera respuesta a su pregunta es: o bien modifique el HTML directamente, o use Javascript.
Hay algunas cosas que usted puede hacer con CSS que afectan el contenido, como añadir texto adicional en frente o detrás de un elemento utilizando los :before y :after pseudo-selectores, pero eso no le ayudará en este caso, y no debe usarse para el tipo de trabajo de cambio de contenido del que está hablando.
Por cierto, un poco fuera de tema, pero si está utilizando el valor del campo de entrada como texto de solicitud, puede considerar buscar en el atributo HTML5 placeholder en su lugar. Esto tampoco responde su pregunta, pero parece que podría serle útil.
Bueno, si * completamente * ignoras la propiedad CSS 'content', supongo que es cierto. –
@RubenMartinezJr .: No ignoré 'content'; solo se aplica a selectores como ': before' y eso está en la respuesta. Pero el punto es que, aunque puedes hacerlo, no debes: poner contenido significativo en CSS es una mala práctica. Confunde la separación entre el estilo y el contenido para el que se diseñó CSS, y tiene problemas de usabilidad para los usuarios finales (p. Ej., No se puede copiar ni pegar, no se lee por lectores de pantalla para usuarios ciegos, etc.). La conclusión es que la propiedad 'content' en': before' y ': after' solo debe usarse para los efectos spot, no para el contenido real del sitio. – Spudley
No, CSS no puede cambiar el atributo value de input, ni tampoco ningún atributo de ningún elemento.
Si desea cambiar el valor, utilice el atributo HTML "valor";
ejemplo:
<input type="submit" value="ENVIAR">
que va a cambiar el valor por defecto "Enviar" valor a "enviar"
tarde a la fiesta, pero utilizando el atributo "contenido", dentro element:before que hará lo que necesita, como se ve en http://www.w3schools.com/cssref/tryit.asp?filename=trycss_content_string
yo era capaz de manipular un valor de contenido a través de jQuery botón toggleClass, el cambio entre las siguientes clases:
.open_button:before{
content:"open";
}
.close_button:before{
content: "close";
}
Entiendo los reparos, pero tengo ganas de que toggleClass brinde una elegancia que justifique el truco de CSS. De lo contrario, uno estaría utilizando una función de alternancia con funciones de interruptor css anidadas. Personalmente, creo que evitar las funciones jQuery anidadas es mejor.
Para mí la solución se
<button type="submit" class="mybutton" name="add">
<span class="add">Add new</span>
</button>
por lo tanto, el css será:
.mybutton:hover .add:after{content="0"}
tan fácil, sólo tiene que escribir por ejemplo:
button {
color: red;
font-family: sans-serif;
}Ahí lo tienes, los botones tomen todas las entradas con valores con, por ejemplo, enviar/reset/.etc ..
Él no quiere cambiar el color y la fuente. –
Esta solución es poco complicado,
pero siempre hay trabajo para mí.
/*CSS Code*/
@media screen and (max-width: 768px) {
.showondesktop {
display: none !important; }
}
#showonmobile {
display:none;
}
@media screen and (max-width: 767px) {
#showonmobile {
display:block; }
}<!--HTML Code->
<div class="showondesktop"> search this site </div>
<div id="showonmobile"> search </div>Cuando el sitio web es visitado desde el móvil se mostrará "búsqueda", pero cuando visitado desde el escritorio se mostrará "Buscar en este sitio". Vista previa de
Image:
han considerado el uso de Javascript para detectar el navegador del usuario y cambiar los campos? http://www.w3schools.com/js/js_browser.asp – Waltzy
@Waltzy - no detecta el navegador en sí; es una mala práctica En cambio, detecte las capacidades del navegador utilizando herramientas como Modernizr; es más confiable y te da un control más detallado. Hay muy pocos casos en que la detección del navegador es necesaria porque otras técnicas no funcionan, pero este no es uno de ellos. – Spudley
@Spudley Saludos por el aviso, lo tendré en cuenta. – Waltzy