cómo establecer el ancho de un cuadro de texto de entrada en HTML, CSS y JavaScript

0 Comments

en este post, veremos cómo establecer el ancho de un cuadro de texto de entrada en HTML, CSS y JavaScript.

ancho Establecido en HTML

En HTML, puede utilizar la etiqueta width atributo para establecer el ancho de un elemento.,

label for=»name»>Enter a value:</label>

<input type=»text» style=»width: 200px;»>
</body>
</html>

Edit in JSFiddle

Alternatively, you can also use the size attribute to define the width of the <input>.,ody>

<label for=»name»>Enter a value:</label>
<input type=»text» size=»20″>
</body>
</html>

Edit in JSFiddle

Set width with CSS

It is good practice to separate CSS from HTML markup., La idea es definir una clase para establecer la propiedad CSS width.

Editar en JSFiddle

alternativamente, también puede usar el selector CSS de un cuadro de texto de entrada para establecer la propiedad CSS width.

Editar en JSFiddle

establecer ancho con JavaScript

con JavaScript, puede usar la funciónsetAttribute() para establecer el valor del atributosize en el cuadro de texto de entrada.

Editar en JSFiddle

También puede cambiar dinámicamente el ancho de un cuadro de texto para que coincida con la longitud de la entrada., This can be easily done by setting the size attribute on key events.

Edit in JSFiddle

(21 votes, average: 5.00 out of 5)

Thanks for reading.


Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *