I have a page in select that shows the stores that I have registered in my BD, I got a css that changed the layout of the same making it more pleasant, but I have a problem, I need this select to get bigger and when changing the size in height it increases the height but it is disproportionate, page can be seen here:
The css I got was this:
.dropdown { display: inline-block; position: relative; overflow: hidden; height: 30px; width: 150px; background: #f2f2f2; border: 1px solid; border-color: white #f7f7f7 #f5f5f5; border-radius: 3px; background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.06)); background-image: -moz-linear-gradient(top, transparent, rgba(0, 0, 0, 0.06)); background-image: -o-linear-gradient(top, transparent, rgba(0, 0, 0, 0.06)); background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.06)); -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08); } .dropdown:before, .dropdown:after { content: ''; position: absolute; z-index: 2; top: 9px; right: 10px; width: 0; height: 0; border: 4px dashed; border-color: #888 transparent; pointer-events: none; } .dropdown:before { border-bottom-style: solid; border-top: none; } .dropdown:after { margin-top: 7px; border-top-style: solid; border-bottom: none; } .dropdown-select { position: relative; width: 200%; margin: 0; padding: 6px 8px 6px 10px; height: 28px; line-height: 14px; font-size: 12px; color: #62717a; text-shadow: 0 1px white; /* Fallback for IE 8 */ background: #f2f2f2; /* "transparent" doesn't work with Opera */ background: rgba(0, 0, 0, 0) !important; border: 0; border-radius: 0; -webkit-appearance: none; } .dropdown-select:focus { z-index: 3; width: 100%; color: #394349; outline: 2px solid #49aff2; outline: 2px solid -webkit-focus-ring-color; outline-offset: -2px; } .dropdown-select > option { margin: 3px; padding: 6px 8px; text-shadow: none; background: #f2f2f2; border-radius: 3px; cursor: pointer; } /* Fix for IE 8 putting the arrows behind the select element. */ .lt-ie9 .dropdown { z-index: 1; } .lt-ie9 .dropdown-select { z-index: -1; } .lt-ie9 .dropdown-select:focus { z-index: 3; } /* Dirty fix for Firefox adding padding where it shouldn't. */ @-moz-document url-prefix() { .dropdown-select { padding-left: 6px; } }