Como principiante, mientras trabajaba con CSS y HTML , es posible que haya notado un problema con los elementos del formulario como la entrada y seleccione que cuando se abre la salida en el navegador, ambos elementos no tienen el mismo ancho. No se vería correctamente alineado para el usuario.
En este artículo, estaríamos aprendiendo cómo hacer que los elementos de entrada y selección tengan el mismo ancho y alto.
Para crear las entradas del mismo ancho, tenemos que usar algunos atributos CSS en nuestro programa.
- box-sizing: Define cómo se calcula el alto y el ancho del elemento.
- moz-box-sizing: solo es compatible con el navegador Mozilla Firefox.
- -webkit-box-sizing: solo es compatible con el navegador Google Chrome.
Ejemplo: en el siguiente código CSS creamos ambos elementos del mismo ancho. A continuación se muestra el código para CSS en el que usaremos algunos atributos que se discutieron anteriormente.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Input and Select Elements with same width
</title>
<!-- CSS stylesheet-->
<style>
input,
select {
width: 200px;
height: 25px;
margin: 2px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
background-color: tomato;
}
</style>
</head>
<!--body tag starts here-->
<body>
<h2 style="color:green">GeeksforGeeks</h2>
<input type="text"
name="Input Element"
id="input_Element"
value="Input Element"><br>
<select name="Select Element" id="select_Element">
<option value="">Select an option</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
</body>
<!--body tag ends here-->
</html>
Salida: la siguiente salida solo se muestra en Mozilla Firefox y Microsoft Edge.
Mismo ancho de entrada y opción de selección