Etiqueta <select>: El componente <select> se utiliza para hacer una lista desplegable. El componente <select> se usa con mayor frecuencia en un formulario, para recopilar información del usuario. Se requiere el atributo de nombre para hacer referencia a los datos del formulario después de enviar el formulario (en caso de que excluya el atributo de nombre, no se enviará ningún dato de la lista desplegable). Se requiere el atributo id para relacionar la lista desplegable con un nombre. La etiqueta <option> dentro del componente <select> caracteriza las opciones accesibles dentro de la lista desplegable.
Sintaxis:
<select>
<option>Option1</option>
<option>Option2</option>
.
.
.
<option>Option n</option>
</select>
Atributos:
- enfoque automático: indica que la lista desplegable debe, en consecuencia, enfocarse cuando se carga la página. (valor: enfoque automático)
- disabled: indica que se debe desactivar una lista desplegable. (valor: deshabilitado)
- formulario: Caracteriza en qué formulario tiene cabida la lista desplegable. (valor: form_id)
- múltiple: Indica que se pueden elegir varias opciones a la vez. (valor: múltiple)
- nombre: Caracteriza un nombre para la lista desplegable. (valor: nombre)
- requerido: Indica que el usuario debe elegir un valor recientemente al enviar el formulario. (valor: requerido)
- tamaño: Caracteriza el número de opciones visibles en una lista desplegable. (valor: número)
Podemos eliminar el radio del borde de la etiqueta Seleccionar mediante dos métodos de la siguiente manera:
Método 1: usar CSS: use alguna propiedad de CSS para eliminar el radio del borde.
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Remove border radius from
Select tag in css
</title>
<style type="text/css">
/* To remove border radius */
select {
height: 20px;
-webkit-border-radius: 0;
border: 0;
outline: 1px solid #ccc;
outline-offset: -1px;
}
</style>
</head>
<body>
<center>
<h3 style="color: green"><br />
GeeksforGeeks
</h3><br />
<select>
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
<option>Option4</option>
<option>Option5</option>
</select>
</center>
</body>
</html>
Producción:
Método 2: Uso de Bootstrap: la hoja de estilo del agente de usuario para Chrome otorga un radio de borde de 5px a todas las esquinas de un componente <select>. Los menús de selección personalizados requieren, por así decirlo, una clase personalizada, .custom-select para activar los estilos personalizados. Los estilos personalizados están restringidos a la apariencia inicial de la selección y no pueden modificar la opción debido a las restricciones del navegador.
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1,
shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity=
"sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous">
<script src="https://kit.fontawesome.com/577845f6a5.js"
crossorigin="anonymous">
</script>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js,
then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity=
"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous">
</script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity=
"sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous">
</script>
<title>
Remove border radius from
Select tag in bootstrap
</title>
<style type="text/css">
/* For default browser setting */
select:not([multiple]) {
-webkit-appearance: none;
-moz-appearance: none;
padding: .5em;
padding-right: 1.5em
}
/* To remove default border radius */
#mySelect {
border-radius: 0
}
/* Optional styling */
option {
font-size: 1.1rem !important;
font-weight: bold;
text-transform: uppercase !important;
color: #013208 !important;
}
</style>
</head>
<body>
<center>
<br />
<h3 style="color: green"><br />
GeeksforGeeks
</h3><br />
<select id="mySelect" class="custom-select"
style="width:150px;
background-color: lightgreen;
font-weight:bold;color:#013208;">
<option value="1">G</option>
<option value="2">E</option>
<option value="3">E</option>
<option value="4">K</option>
<option value="5">S</option>
<option value="6">F</option>
<option value="7">O</option>
<option value="8">R</option>
<option value="9">G</option>
<option value="10">E</option>
<option value="11">E</option>
<option value="12">K</option>
<option value="13">S</option>
</select>
</center>
</body>
</html>
Producción:
Podemos usar la etiqueta de selección y la clase .custom-select con control de formulario de la siguiente manera
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1,
shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity=
"sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous">
<script src="https://kit.fontawesome.com/577845f6a5.js"
crossorigin="anonymous">
</script>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js,
then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity=
"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous">
</script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity=
"sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous">
</script>
<title>
Remove border radius from
Select tag in bootstrap
</title>
<style type="text/css">
/* For default browser setting */
select:not([multiple]) {
-webkit-appearance: none;
-moz-appearance: none;
padding: .5em;
padding-right: 1.5em
}
/* To remove default border radius */
#mySelect {
border-radius: 0
}
</style>
</head>
<body>
<center>
<br />
<h3 style="color: green"><br />
GeeksforGeeks
</h3><br />
<form>
<div class="form-group">
<label for="mySelect">Email address</label>
<input type="email" class="form-control"
id="mySelect" style="width:350px;"
placeholder="name@example.com">
</div>
<div class="form-group">
<label for="mySelect">
Select options
</label><br />
<select class="form-control custom-select"
style="width:150px;" id="mySelect">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
</select>
</div>
</form>
</center>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por swapnitanerkar28 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA