CSS Cambia el color de marcador de posición. Aparición de los nombres de los campos o cómo cambiar el marcador de posición.

En un esfuerzo por reducir la forma y reducir el ruido visual, las etiquetas de los diseñadores Reemplace el atributo del marcador de posición, lo que aumenta la carga en la memoria a corto plazo. Las personas con impedimento de la visión es difícil de leer. Mejor lugar directamente sobre el campo de entrada. El campo vacío es más fácil de reconocer como un elemento que requiere llenado.

malo

Okey

Stylization: Cambiar color Placeholder CSS

Cambiar estilo de campo de entrada con CSS de marcador de posición

malo

Efecto de marcador de posición para.

El atributo de marcador de posición solo funciona para y Incluso si otras etiquetas están especificadas por el atributo contentable.</p> <style> .raz { height: 3em; border: 1px solid; } </style> <div contentEditable placeholder="Puedes ingresar texto" class="raz"></div> <style> .raz { height: 3em; border: 1px solid; } .raz:empty:not(:focus)::before { <i>/* хак: если div задать и placeholder , то и.raz:empty:not(:placeholder-shown)::before будет работать */ </i> content: attr(data-placeholder); opacity: .5; } </style> <div contentEditable data-placeholder="Puedes ingresar texto" class="raz"></div> <h2>Método de memoria antigua Cambio de valor JavaScript</h2> <input onblur="this.value=(this.value==" Onfocus \u003d."this.value=(this.value==this.title)?" value="Correo electrónico" title="Correo electrónico"> <input onblur="this.value=(this.value=="")?this.title:this.value;" onfocus="this.value=(this.value==this.title)?"":this.value;" value="Correo electrónico" title="Correo electrónico" /> <p>El atributo de marcador de posición se utiliza para crear solicitudes dentro de los campos de entrada vacíos (etiquetas <input> y <textarea>). En este artículo, consideraré formas de elegantes cóledadores de jugadores, así como cómo hacerlos más convenientes para usar.</p> <p>Comencemos con el ejemplo para aquellos que aún no saben qué es el PlaySholder y cómo usarlo:</p> <input type= "email" placeholder= "example@gmail.com." > <p> <input type="email" placeholder="example@gmail.com." class="demo-css-placeholders-input"></p> <p>Al desarrollar interfaces, se deben tener en cuenta las características del comportamiento de los playtadores. El texto del jugador desaparece tan pronto como comienza la entrada. Es por eso que no es necesario usarlos para transmitir información sobre el campo de entrada en sí (cuántos y qué caracteres deben contener). Para estos fines es mejor usar la etiqueta. <label> o párrafo con una pequeña punta. Aprenda más sobre las características del uso de los chiseders del jugador se pueden leer.</p> <h2>Estilización</h2> <p>Las siguientes reglas se utilizan para estilizar los cóledadores del jugador:</p> :: - WebKit-Input-Placeholder (Color: Blue;) :: - Moz-Placerholder (Color: Blue;) / * Firefox 19+ * /: -MOZ-Placeholder (Color: Blue;) / * Firefox 18- * /: -MS-INPUT-PLAMADHHOLDER (COLOR: AZUL;) <p>Se ve terrible, ¿verdad? Y hay una razón para esto, hasta ahora, las reglas de CSS para los titulares no estaban estandarizadas e implementar en cada navegador es diferente. Lea más sobre todos los prefijos necesarios se pueden encontrar en Caniuse.</p> <p>Si está utilizando un preprocesador CSS, lo más probable es que el uso de estilos a los bomberos, será más conveniente para escribir una mezcla simple. Ejemplo en SASS:</p> @Mixin Placeholder (&: - WebKit-Input-Placeholder (@Content;) &: - Moz-Placeholder (@content;) &: - Moz-placeholder (@content;) &: - MS-Input-Placeholder (@Content ;)) <p>Dependiendo del contexto de la mezcla, puede usar la aplicación global de estilos y artículos individuales (intente en Sassmeister):</p> <span>// globalmente para cada campo de entrada</span>@InClude Placeholder (Color: Azul;) <span>// para ciertos campos de entrada</span>.input (@Include Placamholder (Color: Green;)) <h4>Ejemplo</h4> <p>Texto azul para PlaySholder (nunca lo hagas):</p> .Blue-Text :: - WebKit-Input-Placeholder (Color: # 2e8ece;) .ble-Text: -Moz-Placeholder (Color: # 2e8ece;) .Blue-Text :: - Moz-placeholder (Color: # 2E8ECE ;) .Blue-Text: -MS-INPUT-Placeholder (Color: # 2E8ECE;) <p> <input type="text" placeholder="Empezar a escribir aquí" class="demo-css-placeholders-input pl-blue-text"></p> <h2>Propiedades compatibles</h2> <p>No todas las propiedades de CSS se pueden usar con PlayCold. Aquí hay una lista completa de propiedades compatibles:</p> <ul><li>fuente y todas las propiedades relacionadas (tamaño de fuente, fuentes-familia, etc.)</li> <li>fondo y todas las propiedades relacionadas (color de fondo, imagen-imagen, etc.)</li> <li>opacidad</li> <li>guion de texto</li> <li>desbordamiento de texto.</li> <li>color</li> <li>transformación de texto</li> <li>altura de la línea</li> <li>espaciamiento de palabras</li> <li>espaciado de letras</li> <li>texto-decoración.</li> <li>alineado vertical</li> </ul><h2>Animación</h2> <p>Las ideas de animación pertenecen a HTML5.BY BLOG.</p> <p>Todos los siguientes ejemplos están escritos utilizando el preprocesador SASS. Cada uno está adjunto con un enlace a Sassmeister, que puede encontrar el código CSS compilado.</p> <p>Lo más probable es que desee aplicar animaciones a los filmeros cuando se centre en el campo de entrada. Todo esto se hace bastante simple. Solo unas cuantas veces usadas por el marcador de posición anterior:</p> .Input (@Include Placeholder ( <span>// Estilos para el estado normal</span> ) &: Enfoque (@Include Placeholder ( <span>// estilos después del evento de enfoque</span> } } } <h3>Cambiar de transparencia</h3> .input (Color: #aaa; Opacidad: 1; Transición: Opacidad 300ms;) &: Enfoque (@InClude Placeholder (Opacidad: 0;))) <p> <input type="text" placeholder="Demo: Cambio de transparencia." class="demo-css-placeholders-input pl-opacity"></p> <h3>Cambia a la derecha e izquierda.</h3> <p>Cuanto mayor sea el ancho del campo de entrada, mayor será el valor de la propiedad de muesca de texto. Para el campo de entrada estándar, 500px será suficiente, para más amplio, es necesario recoger manualmente. Desde el ancho del campo de entrada y el valor de la muesca de texto depende de la velocidad de la animación. Para cambiar, debe usar valores negativos, por ejemplo, -500px.</p><p> <input type="text" placeholder="Demo: Cambia a la derecha." class="demo-css-placeholders-input pl-shift-right"><input type="text" placeholder="Demo: Shift a la izquierda" class="demo-css-placeholders-input pl-shift-left"></p> <h3>Cambiar</h3> <p>Como en el último ejemplo, la animación depende del tamaño de la voluntad de la entrada, pero en este caso se presta la atención a la altura. Para los abrumadores campos de entrada de mayoría, el valor de altura de línea deseado estará dentro de 100 px. Desafortunadamente, utilizando la propiedad de altura de línea, es imposible implementar el efecto de cambio, ya que la propiedad no acepta valores negativos.</p> .input (texto-sangría: 0px; Transición: Ministerio de texto 300ms;) &: Focus (@InClude Placeholder (texto-sangría: 500px;)))) <p> <input type="text" placeholder="Demo: Cambia hacia abajo" class="demo-css-placeholders-input pl-shift-down"></p> <h3>Juntos</h3> <p>Para usar el código de animación para PlayColders, fue agradable y conveniente, puede escribir una pequeña biblioteca de mezclas para cualquier preprocesador. La biblioteca se ve así ():</p> @Mixin Placeholder (&: - Webkit-input-Placeholder (@Content) &: - Moz-placeholder (@content) &: - Moz-placeholder (@content) &: - ms-input-placeholder (@content)) @ Mixin pl-Shift ($ Side: Izquierda, $ Posición: 500px, $ Duración) (@InClude Placeholder (Texto-sangría: 0; Transición: Ministerio de texto $ Duración;) &: Focus (@InClude Placeholder (SINDENTE DE TEXTO: if ($ side \u003d\u003d a la izquierda, - $ posiciones, $ posiciones);))) @Mixin pl-deslizamiento ($ Posición: 5, $ Duración: 200ms) (@InClude Placeholder (altura de la línea: 1; Transición: Línea de altura $ duración;) &: enfoque (@Include placeholder (altura: $ posiciones;))) @Mixin pl-Fade-Out ($ Duración: 200 ms) (@InClude Placeholder (Opacidad: 1; Transición: Opacidad $ Duración;) &: enfoque (@Include placeholder (opacidad: 0;))) <p>Es muy sencillo de usarlo. Es suficiente para conectar la mezcla deseada a cualquier campo de entrada de campo o simplemente crear una regla global para todos los teléfonos de pago en la página:</p> <span>// para elementos individuales</span>.pl-Shift-derecha (@Include pl-shift (derecha);) .Pl-Fade-Out (@Include pl-Fade-Out;) <span>// para el resto</span>@Include pl-shift (izquierda); <h2>Autopreficiente.</h2> <p>Si no usa el preprocesador y aún no desea que su archivo CSS de origen se convierta en gachas de prefijos para todos los navegadores posibles, luego preste atención a AutoPrefixer. Con él, CSS puro se puede ensuciar (pero ya en otro archivo) agregando todos los prefijos necesarios a todas las propiedades. Para forzar al complemento a trabajar con los Pasos, es suficiente para usar un Pseudo-elemento :: Placeholder:</p> :: Placeholder (Color: Orange;). Entrada :: Placeholder (Color: Azul;) <p>Después de analizar la batería, AutoPrefixer creará un archivo CSS separado, que escribirá todos los prefijos necesarios para todo el navegador que especificó.</p> <h2>Que sigue</h2> <p>Como ya he escrito anteriormente, todo lo que está relacionado con el uso de estilos a Playswords aún no está estandarizado. Se corregirá pronto. La especificación del nivel 4 de selector se le agregó pseudo-clase: mostrado de posición, que finalmente conducirá al estándar toda la mezcla de pseudoclass y pseudoalementos que existen ahora. Puede seguir el soporte para Caniuse (ahora no es compatible con ningún navegador).</p> <p>Aplique estilos con: marcador de posición, mostrado será mucho más simple:</p> .input: marcador de posición (color: azul;) <p>El atributo del marcador de posición se utiliza para solicitar una acción dentro de las entradas de elementos vacíos y Textarea. En este artículo, consideraremos la capacidad de estilizar el Placeholder de texto, así como algunos trucos que lo harán más cómodo y funcional.</p> <p>Entonces, comencemos con el ejemplo para aquellos que no saben qué es el marcador de posición.</p> <h4>html.</h4> <input type="text" placeholder="Deja el mensaje aquí"> <p>Placeholder: un estilo se puede cambiar utilizando un conjunto de reglas CSS:</p> <h4>cSS.</h4> :: - WebKit-Input-Placeholder (Color: # C0392B;) :: - MOZ-Placeholder (Color: # C0392B;) / * Firefox 19+ * /: -moz-placeholder (Color: # C0392B;) / * Firefox 18- * /: -MS-INPUT-PLAMEDHACKDER (COLOR: # C0392B;) <p>Parece miedo, ¿no es así? El hecho es que esto todavía no está en las normas. Cada navegador ha implementado el soporte para la estilización del marcador de posición.</p> <p>En IE y el antiguo Firefox (hasta el 18º), el marcador de posición se considera un Pseudolass, y en el nuevo Firefox, WebKit y Blink - Pseudo-Element.</p> <p>Miramos lo que pasó:</p> <p>Debe decirse que no todas las propiedades de CSS posibles son compatibles. La mayoría de los navegadores modernos le permiten cambiar:</p> <ul><li>fuente (y propiedades relacionadas)</li> <li>fondo (y propiedades relacionadas)</li> <li>color</li> <li>espaciamiento de palabras</li> <li>espaciado de letras</li> <li>texto-decoración.</li> <li>alineado vertical</li> <li>transformación de texto</li> <li>altura de la línea</li> <li>guion de texto</li> <li>desbordamiento de texto.</li> <li>opacidad</li> </ul><h2>¿Y si el marcador de posición no encaja?</h2> <p>A veces, los campos de entrada de campo se reducen de ancho debido a las características de Laota, en particular en dispositivos móviles. En este caso, el largo texto del marcador de posición, será un corte feo. Para evitar esto, puede usar el desbordamiento de texto: elipsis. Tal sintaxis funcionará en todos los nuevos navegadores.</p> <h4>cSS.</h4> Entrada (desbordamiento de texto: elipsis;) Entrada :: - MOZ-Placeholder (desbordamiento de texto: ellipsis;) Entrada: -MOZ-Placeholder (desbordamiento de texto: elipsis;) Entrada: -MS-INPUT-PLAMEHOLDER (desbordamiento de texto : elipsis;) <h2>¿Cómo ocultar el marcador de posición en foco?</h2> <p>El escondite de marcador de posición es diferente.</p> <ol><li>en algunos navegadores al recibir enfoque en el incom.</li> <li>en otros navegadores, si tiene al menos un símbolo ingresado</li> </ol><p>Me gusta la primera opción. Para pedir tal comportamiento en todos los navegadores que apoyan el marcador de posición, definimos las siguientes reglas CSS:</p> <h4>cSS.</h4> : Enfoque :: - WebKit-Input-Placeholder (Color: Transparente): Focus :: - MOZ-Placeholder: FOCUS: -MOZ-Placeholder (Color: Transparente): Focus: -MS-INPUT-PLAMADHHOLDER (Color: Transparente) <h2>Ocultar el marcador de posición bellamente</h2> <p>También puede agregar transición a aparecer y ocultar marcador de posición-a:</p> <h4>cSS.</h4> / * Cambio suave de transparencia de marcador de posición cuando FOCUS * / .Input1 :: - WebKit-Input-Placeholder (Opacidad: 1; Transición: Opacidad 0.3s Facilidad;) .Enput1 :: - Moz-Placamherder (Opacidad: 1; Transición: Opacidad 0.3s facilidad;) .Input1: -Moz-Placamhutherder (Opacidad: 1; Transición: Opacidad 0.3s Facilidad;) .Enput1: -MS-PURS-PLAMADHHOLDER (Opacidad: 1; Transición: Opacidad 0.3s facilidad;) .input1: Enfoque :: - WebKit-Input-Placeholder (Opacidad: 0; Transición: Opacidad 0.3s Facilidad;) .Enput1: enfoque :: - Moz-Placerholder (Opacidad: 0; Transición: Opacidad 0.3s Facilidad) .Input1: enfoque: -Moz-Placordholder (Opacidad: 0; Transición: Opacidad 0.3s Facilidad;) .Input1: enfoque: -MS-INPUT-PLOSETHOLDER (Opacidad: 0; Transición: Opacidad 0.3s Facilidad;) / * Shift Placeholder-un enfoque derecho * / .input2 :: - WebKit-Input-Placeholder (texto-sangría: 0px; Transición: Transición: Ministerio de texto 0.3s Facilidad;) .Input2 :: - MOZ-Placeholder (Ministerio de texto: 0px; Transición: Ministerio de texto 0.3s Facilidad;) .Enput2: -Moz-Placamholder (texto-sangría: 0px; Transición: Texto-guinando 0.3s facilidad;) .input2: -ms-input-placeholde R (texto-sangría: 0px; TRANSICIÓN: Facilidad de 0.3S de Hindent de texto;) .Input2: enfoque :: - WebKit-Input-Plackhutder (texto-sangría: 500px; Transición: Texto-guinando 0.3s facilidad;) .input2: enfoque :: - MOZ-Placamholder ( MINIENTE DE TEXTO: 500px; Transición: Facilidad de 0.3s de manguito de texto;) .Input2: enfoque: -Moz-Placeholder (texto-sangría: 500px; Transición: Texto-guinando 0.3s facilidad;) .input2: enfoque: -MS- Entrada-marcador de posición (texto-sangría: 500px; Transición: Ministerio de texto 0.3S Facilidad;) / * Shift Placeholder-A Down cuando Focus * / .Input3 :: - WebKit-Input-Placeholder (Línea Altura: 20px; Transición: Facilidad de la altura de la línea 0.5s;) .input3 :: - MOZ-Placerholder (altura de la línea: 20px; Transición: Altura de la línea 0.5s Facilidad;) .Input3: -Moz-Placeholder (Línea Altura: 20px; Transición: Línea -Height 0.5s Facilidad;) .Input3: -MS-INPUT-PLOSETHOLDER (Línea Altura: 20px; Transición: Altura de línea 0.5s Facilidad;) .Input3: enfoque :: - WebKit-Input-Placeholder (altura de la línea: 100px; Transición: Altura de línea 0.5s Facilidad;) .Input3: enfoque :: - MOZ-Placerholder (altura de la línea: 100px; Transición: Altura de la línea 0.5s facilidad;) .input3: enfoque: -moz-placehold Er (altura de la línea: 100px; Transición: altura de línea 0.5s facilidad;) .input3: enfoque: -MS-INPUT-PLOSETHOLDER (Línea Altura: 100px; Transición: Altura de línea 0.5s Facilidad;) <p>Espero que sea útil. Escribe comentarios y sugerencias en los comentarios.</p> <p>PlayColeder es un elemento del campo de entrada en el que puede colocar una sugerencia. Cuando el usuario comienza a ingresar datos, el texto auxiliar desaparece para no interferir. Cada navegador tiene su propia opinión sobre la descripción de cómo se debe mostrar este elemento, y a veces los estilos predeterminados rompen todo el diseño. Para administrarlos, debe utilizar la regla especial del marcador de posición CSS.</p> <h2>¿Dónde está PlayColeder?</h2> <p>El problema es que el indicio del campo de entrada está bien oculto en la sombra DOM, y no es tan fácil llegar a él. Esto utiliza un marcador de posición no estándar especial :: Con él, puede controlar las propiedades del indicador.</p> <p>La estilización del marcador de posición en CSS se ve así:</p><p>Entrada :: Placeholder (Color: Rojo; Opacidad: 1; Estilo de fuentes: cursiva;)</p><p><img src='https://i0.wp.com/fb.ru/misc/i/gallery/39768/2606908.jpg' width="100%" loading=lazy loading=lazy></p> <h2>Navegadores de soporte</h2> <p>El pseudo-elemento del Placeholder del CSS está bien procesado por todos los navegadores modernos y para admitir los navegadores antiguos, puede usar los prefijos:</p> <ul><li>:: - WebKit-Input-Placeholder - para el navegador webkit (Safari, Chrome, Opera);</li> <li>:: - Moz-placeholder - para los navegadores de Firefox por encima de 19 versiones;</li> <li>: -Moz-placeholder - para viejos Firefox;</li> <li>: -MS-INPUT-Placeholder - para Internet Explorer por encima de la versión 10.</li> </ul><p>Como se puede ver, los viejos navegadores de Mozilla, así como, es decir, consideren CSS-Pseudoclass del marcador de posición, no un pseudoemento. No discutiremos con ellos, solo tenga en cuenta este aspecto al diseñar el campo de entrada.</p> <p><img src='https://i1.wp.com/fb.ru/misc/i/gallery/39768/2606909.jpg' width="100%" loading=lazy loading=lazy></p> <h2>Oportunidades de estilización</h2> <p>Para un marcador de posición pseudo-elemento en CSS, puede configurar los siguientes parámetros:</p> <ul><li>aNTECEDENTES - Grupo de indicaciones El bloque se aplica a todos los campos de entrada. Puede especificar no solo el color (color de fondo), sino también la imagen (imagen de fondo).</li> <li>color de texto - color;</li> <li>transparencia - Opacidad;</li> <li>subrayado, sin perjonar o con vistas a la decoración de texto;</li> <li>registro - Transformación de texto;</li> <li>ingentes internos - relleno. No es compatible con todos los navegadores. En cuanto a los elementos en minúsculas, los muesos superiores e inferiores se ignoran.</li> <li>pantalla de fuentes: propiedades de la fuente, grupo de altura de línea y una variedad de sangrías (texto-identificante, espaciado de letras, espaciado de palabras);</li> <li>alineación vertical en la cadena - alinear vertical;</li> <li>recorte de texto cuando el contenedor está desbordado: desbordamiento de texto.</li> </ul> .input1 :: Placeholder (cal, cal, azul); color: blanco;) .input2 :: Placeholder (decoración de texto: línea a través; Color: Púrpura; Fuente-peso: negrita;). Input3 :: Placeholder (Fuente -SIZE: 16px; letra-espacio: 10px;) .input4 :: Placeholder (Fondo: Marrón; Color: Blanco; Albordamiento de texto: Ellipsis;) <h2>Enfocado</h2> <p>De forma predeterminada, la punta desaparece del campo de entrada solo si al menos un carácter se ingresa en él. Pero el marcador de posición le permite hacer la desaparición inmediatamente cuando se centre en el campo. Para hacer esto, combínalo con un pseudolus: enfoque.</p><p>Entrada: enfoque :: Placeholder (Color: Transparente;)</p><p>En algunos navegadores, está permitido ajustar el cambio en la especificación del Playector, utilizando la instrucción de transición.</p><p>Entrada :: Placeholder (Color: Negro; Transición: Color 1S;) Entrada: enfoque :: Placeholder (Color: Blanco;)</p><p>En el navegador de Google Chrome, el color de las indicaciones cuando se centre en dicho campo cambiará suavemente durante un segundo.</p> <p>PlayColeder es un elemento del campo de entrada en el que puede colocar una sugerencia. Cuando el usuario comienza a ingresar datos, el texto auxiliar desaparece para no interferir. Cada navegador tiene su propia opinión sobre la descripción de cómo se debe mostrar este elemento, y a veces los estilos predeterminados rompen todo el diseño. Para administrarlos, debe utilizar la regla especial del marcador de posición CSS.</p> <h2>¿Dónde está PlayColeder?</h2> <p>El problema es que el indicio del campo de entrada está bien oculto en la sombra DOM, y no es tan fácil llegar a él. Esto utiliza un Pseudo-element CSS: Placeholder especial no estándar. Con él, puede controlar las propiedades del indicador.</p> <p>Usted será destinado:</p> <p><img src='https://i0.wp.com/ruud.ru/wp-content/uploads/2018/06/4f1695522eb38124e423c90938dc189d.jpg' width="100%" loading=lazy loading=lazy></p><p>La estilización del marcador de posición en CSS se ve así:</p> <p>entrada :: Placeholder (Color: Rojo; Opacidad: 1; Estilo de fuentes: cursiva;) <br><img src='https://i0.wp.com/ruud.ru/wp-content/uploads/2018/06/050be174ed3b60dc7c49fe3cd59e15ba.jpg' width="100%" loading=lazy loading=lazy></p><h2>Navegadores de soporte</h2> <p>El pseudo-elemento del Placeholder del CSS está bien procesado por todos los navegadores modernos y para admitir los navegadores antiguos, puede usar los prefijos:</p> <ul><li>:: - WebKit-Input-Placeholder - para el navegador webkit (Safari, Chrome, Opera);</li> <li>:: - Moz-placeholder - para los navegadores de Firefox por encima de 19 versiones;</li> <li>: -Moz-placeholder - para viejos Firefox;</li> <li>: -MS-INPUT-Placeholder - para Internet Explorer por encima de la versión 10.</li> </ul><p>Como se puede ver, los viejos navegadores de Mozilla, así como, es decir, consideren CSS-Pseudoclass del marcador de posición, no un pseudoemento. No discutiremos con ellos, solo tenga en cuenta este aspecto al diseñar el campo de entrada.</p> <p><img src='https://i2.wp.com/ruud.ru/wp-content/uploads/2018/06/7563ac2e917a7adb9324bb1d45af7f8e.jpg' width="100%" loading=lazy loading=lazy></p><h2>Oportunidades de estilización</h2> <p>Para un marcador de posición pseudo-elemento en CSS, puede configurar los siguientes parámetros:</p> <ul><li>fondo - grupo de propiedades del fondo. El fondo del bloque inmediato se aplica a todo el campo de entrada. Puede especificar no solo el color (color de fondo), sino también la imagen (imagen de fondo).</li> <li>color de texto - color;</li> <li>transparencia - Opacidad;</li> <li>subrayado, sin perjonar o con vistas a la decoración de texto;</li> <li>registro - Transformación de texto;</li> <li>ingentes internos - relleno. No es compatible con todos los navegadores. En cuanto a los elementos en minúsculas, los muesos superiores e inferiores se ignoran.</li> <li>pantalla de fuentes: propiedades de la fuente, grupo de altura de línea y una variedad de sangrías (texto-identificante, espaciado de letras, espaciado de palabras);</li> <li>alineación vertical en la cadena - alinear vertical;</li> <li>recorte de texto cuando el contenedor está desbordado: desbordamiento de texto.</li> </ul><p>Entrada1 :: Placeholder (cal, azul); Color: blanco;) .input2 :: Placeholder (decoración de texto: línea a través; Color: Púrpura; FONT-PESO: BOLD;) .input3 :: Placeholder (Tamaño de fuente: 16px; Letra-Spacion: 10px;) .input4 :: Placeholder (Fondo: marrón; Color: blanco; desbordamiento de texto: elipsis;)</p><h2>Enfocado</h2> <p>De forma predeterminada, la punta desaparece del campo de entrada solo si al menos un carácter se ingresa en él. Pero el pseudo-elemento de CSS Placeholder le permite hacer que la desaparición sea inmediatamente cuando se centre en el campo. Para hacer esto, combínalo con un pseudolus: enfoque.</p> <p>entrada: enfoque :: Placeholder (Color: Transparente;)</p><p>En algunos navegadores, está permitido ajustar el cambio en la especificación del Playector, utilizando la instrucción de transición.</p> <p>entrada :: Placeholder (Color: Negro; Transición: Color 1S;) Entrada: enfoque :: Placeholder (Color: Blanco;)</p><p>En el navegador de Google Chrome, el color de las indicaciones cuando se centre en dicho campo cambiará suavemente durante un segundo.</p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </div> <div class="dsperelink"> <div class="read-analog"> <style> </style> <style> #perelink-horizontal { vertical-align: top; margin: 0 -5px; text-align: left; } #perelink-horizontal .perelink-horizontal-item { vertical-align: top; display: inline-block; width: 192px; margin: 0 5px 10px; } #perelink-horizontal .perelink-horizontal-item a span { display: block; margin-top: 10px; } #perelink-horizontal img { width: 192px; height: 192px; margin-bottom: 10px; } </style> <div id="perelink-horizontal"> <div class="perelink-horizontal-item"> <a href="https://olympsb.ru/es/chto-nuzhno-dlya-sozdaniya-registratora-domenov-biznes-po-pereprodazhe.html"> <img src="/uploads/7b9f98934aa10459fbea2486aad25259.jpg" height="192" width="192" loading=lazy loading=lazy> <span>Nombre de dominio Reseller Business: Consejos, Elección del Registrador</span> </a> </div> <div class="perelink-horizontal-item"> <a href="https://olympsb.ru/es/vstrechi-i-znakomstva-flirchi-znakomstva-bez-registracii-flirchi-ukrainskaya.html"> <img src="/uploads/759a1b1dcf278bda378b922286ca0a0a.jpg" height="192" width="192" loading=lazy loading=lazy> <span>COMIDA CLICTRICA SIN REGISTRO FLIRCHI VERSIÓN UCRANIA</span> </a> </div> <div class="perelink-horizontal-item"> <a href="https://olympsb.ru/es/bezopasnost-oblachnyh-hranilishch-kak-naiti-v-kompyutere-oblako-oblachnoe.html"> <img src="/uploads/53098a0c5505665e1010c9451e298d86.jpg" height="192" width="192" loading=lazy loading=lazy> <span>Cómo encontrar un almacenamiento en la nube en la nube</span> </a> </div> <div class="perelink-horizontal-item"> <a href="https://olympsb.ru/es/chto-vhodit-v-ponyatie-orgtehnika-spisok-chto-podrazumevaetsya-pod.html"> <img src="/uploads/a5a7fd2cf0cfa2c948269fa826ec094b.jpg" height="192" width="192" loading=lazy loading=lazy> <span>Lo que se entiende bajo equipos de oficina para la oficina y lo que se necesita.</span> </a> </div> </div> </div> </div> </div> </article> </div> </section> <aside class="col-xs-12 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation"> <div class="mainnavbar side-box clear"> <div id="nav_menu-2" class="side-box_b"> <div class="menu-sidenav-container"> <ul id="menu-sidenav" class="menu"> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://olympsb.ru/es/category/total/">General</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://olympsb.ru/es/category/hard-drive/">Hdd</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://olympsb.ru/es/category/different/">miscelánea</a> </li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://olympsb.ru/es/category/windows/">Ventanas</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://olympsb.ru/es/category/apple/">Manzana.</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://olympsb.ru/es/category/android/">Androide</a> </li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://olympsb.ru/es/category/browsers/">Navegador</a> </li> </ul> </div> </div> </div> <div class="side-box lastfaq faqli clear"> <span class="title-f">TOP 5:</span> <ul class="textw_a clear"> <li><a href="https://olympsb.ru/es/kak-sdelat-zvuk-na-kompyutere-gromche-esli-vs-na-maksimume-chto-delat-esli.html">¿Qué hacer si un sonido silencioso en los auriculares es una guía para aumentar el volumen de sonido cómo hacer que los auriculares incluso más fueran</a></li> <li><a href="https://olympsb.ru/es/sozdanie-dokumentov-v-html-sozdanie-pervoi-veb-stranicy-i-abzac.html">Creando una primera página web y párrafo de texto a través de</a></li> <li><a href="https://olympsb.ru/es/sql-uporyadochit-po-vozrastaniyu-rabota-s-bazoi-dannyh.html">SQL Streamline ascendente</a></li> <li><a href="https://olympsb.ru/es/chto-daet-obnovlenie-biosa-nuzhno-li-obnovlyat-bios-chto-dast-proshivka.html">¿Necesito actualizar el BIOS que le da al firmware BIOS?</a></li> <li><a href="https://olympsb.ru/es/diagnostika-materinskoi-platy-noutbuka-akkumulyator-noutbuka-sbros.html">Batería portátil: Restablecer controlador, firmware y lenovo Lenovo Power Controller</a></li> </ul> </div> <div class="side-box lastfaq faqli clear"> <span class="title-f">Materiales recientes:</span> <ul> <li> <a href="https://olympsb.ru/es/po-forme-izobrazheniya-informaciya-klassificiruetsya-kak.html" >En el formulario de imagen, la información se clasifica como</a> </li> <li> <a href="https://olympsb.ru/es/bios-nuzhno-li-obnovlyat-stoit-li-obnovlyat-bios-osobennosti-i-nyuansy.html" >¿Vale la pena actualizar el BIOS - Características y matices que vale la pena actualizar el BIOS</a> </li> <li> <a href="https://olympsb.ru/es/brauzer-gugl-nazyvaetsya-internet-brauzer-google-chrome---polnaya.html" >Browser de Internet Google Chrome - Información completa y descarga gratuita Versión rusa</a> </li> <li> <a href="https://olympsb.ru/es/kakie-volny-ulavlivaet-televizor.html" >¿Qué ondas atrapa el televisor?</a> </li> <li> <a href="https://olympsb.ru/es/chto-takoe-brauzer-google-istoriya-brauzera-google-chrome-sozdanie-stanovlenie-i.html" >Historia del navegador de Google Chrome: creación, formación y desarrollo</a> </li> </ul> </div> <div class="side-box clear"> <div id="rexuta2" style="height:800px;width:240px;" align="center"></div> </div> </aside> </section> <div class="footer"> <div id="footer_mainnav" class="mainnav collapse navbar-collapse col-xs-12 col-sm-12"> <ul id="menu-mainnav-1" class="nav navbar-nav navi"> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://olympsb.ru/es/category/flash-drives/">Unidades flash</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://olympsb.ru/es/category/total/">General</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://olympsb.ru/es/category/hard-drive/">Hdd</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://olympsb.ru/es/category/different/">miscelánea</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://olympsb.ru/es/category/windows/">Ventanas</a></li> </ul> </div> <div class="twobl-footer col-xs-12 col-sm-12"> <div class="onef col-xs-12 col-sm-3"> <div class="fool2og log-m_h1"> <img src='/public/logo.png' loading=lazy loading=lazy> </div> <div class="decksite"></div> </div> <div class="twof col-xs-12 col-sm-2"> <ul id="menu-foonav" class="twonavig"> <li id="menu-item-" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-"><a href="https://olympsb.ru/es/category/apple/">Manzana.</a></li> <li id="menu-item-" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-"><a href="https://olympsb.ru/es/category/android/">Androide</a></li> <li id="menu-item-" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-"><a href="https://olympsb.ru/es/category/browsers/">Navegador</a></li> <li id="menu-item-" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-"><a href="https://olympsb.ru/es/category/flash-drives/">Unidades flash</a></li> </ul> </div> <div class="treef col-xs-12 col-sm-4"> <ul class="f-post"> <li><a href="https://olympsb.ru/es/tipy-plotterov-plotter-vidy-i-rabota-primenenie-i-kak-vybrat-osobennosti.html">Tipos de plotters. Trazador. Tipos y trabajo. Aplicación y cómo elegir. Características que son los plotters</a></li> <li><a href="https://olympsb.ru/es/istoriya-razvitiya-poiskovyh-sistem-poiskovaya-sistema-kakaya.html">Motor de búsqueda que el motor de búsqueda apareció anteriormente.</a></li> <li><a href="https://olympsb.ru/es/oshibki-scenariya-v-internet-explorer-prichiny-i-metody-ustraneniya.html">Causas y métodos de eliminación.</a></li> <li><a href="https://olympsb.ru/es/kak-pravilno-sostavit-title-dlya-stranicy-html-teg-title-effektivno.html">TAG Título HTML: use efectivamente el título de la página</a></li> </ul> </div> <div class="fourf col-xs-12 col-sm-3"> <div class="buth"> <a class="butt-faq buttorang" href="" title="contactos">Contactos</a> </div> <p class="continfo">Computadora ayuda a olimpus</div> </div> <div class="tree-footer col-xs-12 col-sm-12 clear"> © 2021. Olympsb.ru. Computadora ayuda a Olympus.</div> </div> <script src="https://olympsb.ru/wp-content/themes/vsepropechen/js/bootstrap.min.js"></script> <script type='text/javascript' src='https://olympsb.ru/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?ver=3.51.0-2014.06.20'></script> <script type='text/javascript' src='https://olympsb.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.5.1'></script> <script type='text/javascript' src='https://olympsb.ru/wp-content/plugins/wp-postratings/postratings-js.js?ver=1.83'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.7.6'></script> <script type='text/javascript' src='https://olympsb.ru/wp-content/plugins/disqus-comment-system/media/js/disqus.js?ver=4.7.6'></script> <script type='text/javascript' src='https://olympsb.ru/wp-content/plugins/disqus-comment-system/media/js/count.js?ver=4.7.6'></script> <div style="display:none"> <div id="text-3" class="conter-metr"> <div class="textwidget"> </script> </div> </div> </div> <div id="top-link"> <a href="https://olympsb.ru/es/#top"></a> </div> <script type="text/javascript">  </script><br> <br> </body> </html> </div>