No consigo cambiar el tamaño específicamente el height
del select
, ni si quiera dentro de un container
, o un div
.
Aqui os dejo un ejemplo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ejemplo select</title>
<!-- CSS de Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<!-- Tema opcional -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" integrity="sha384-aUGj/X2zp5rLCbBxumKTCw2Z50WgIr1vs/PFN4praOTvYXWlVyh2UtNUU0KAUhAX" crossorigin="anonymous">
<style type="text/css">
.no-padding{
padding: 0;
}
</style>
</head>
<body>
<div class="row text-center" style="padding-top: 50px; padding-left: 50px">
<div class="col-lg-12 col-md-12 col-sm-12 activity-line-action-list no-padding">
<div class="row">
<div class="input-setting col-md-9">
<div style="position: relative" class="form-control-wrapper no-padding ">
<input type="text" autofocus class="form-control input-direccion" placeholder="" >
<i class="icon-left font-icon font-icon-pin icon-direccion input-tooltip">
</i>
<div class="form-tooltip-error" style="margin-bottom: -12px;right: 25px;display:none"> Incorrecta</div>
<span class="font-icon font-icon-star icon-rigth add-direccion-favorita "></span>
</div>
</div>
<div class="col-md-3 no-padding">
<select class="zonal_select" placeholder="m">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
</div>
</div>
</div>
<!-- Librería jQuery requerida por los plugins de JavaScript -->
<script src="http://code.jquery.com/jquery.js"></script>
<!-- JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
</body>
</html>
Editado:
Necesito que el select
se vea en la misma posición en la misma linea, y con el mismo tamaño del input
, pero no lo consigo.
Gracias de antemano.
<select class="form-control form-control-lg"> <option>Large select</option> </select> <select class="form-control"> <option>Default select</option> </select> <select class="form-control form-control-sm"> <option>Small select</option> </select>
ahí tienes varios tamaños. – A. Cedano el 28 nov. 17 a las 14:07<link rel=...
aparece que estás usando (o intentando usar) Bootstrap. Verifica que se está incluyendo bien. Si usas esa librería será para aprovechar sus ventajas, entre las cuales se encuentra lo que quieres, aplicando una clase como esta alselect
:<select class="form-control form-control-lg">
, dondelg
indica un select grande y así sucesivamente. – A. Cedano el 28 nov. 17 a las 14:11