Display text below other text also need space between text and dropdown symbol

Question

we have Brand and model dropdown boxes looking like this link as below image

I want to make like this :

css

#brand_select
{
color: #000000; 
text-transform: capitalize;
font-size:17px;
font-weight:bold;
letter-spacing: 1px;
}



#model_select
{
color: #000000; 
text-transform: capitalize;
font-size:17px;
font-weight:bold;
letter-spacing: 1px;
}

html

<?php

$brandSelect = '<select id="brand_select">';
$brandSelect .= '<option value="">My Brand</option>';

<select id="model_select"><option value="">My Model</option></select>'

?>

we want to Display My model below My Brand also want to give space between My Brand text and dropdown symbol.

Can we have some code to base on ? The CSS you gave us looks like only a part of your code, and maybe some html if your divs are inside a container or something. — Relisora, Jul 13 '16 at 11:02

score 3 · Accepted Answer · answered Jul 13 '16 at 11:15

3

You can add static width to dropdowns, for example width: 150px;

Here is working example: https://jsfiddle.net/Mindaugas/17eLs0oz/

answered Jul 13 '16 at 11:15

Mindaugas M.

121
2
6

Thanks, do you have any idea wghat font we need to use to look like in 2nd image ? – fresher Jul 13 '16 at 11:22
Looks like "Open Sans", 18px, Bold https://www.google.com/fonts#QuickUsePlace:quickUse/Family:Open+Sans – Mindaugas M. Jul 13 '16 at 11:38

nitzanerman · Answer 2 · 2016-07-13T11:35:41.873

1

you can put your select elements inside a div element for them to be as you want.

for the space between the boxes you can use padding.

for the space between the text and the dropdown symbol you can use width.

you may see an example here: https://embed.plnkr.co/NypAPGHZmrBjh88nZfnW/

edited Jul 13 '16 at 11:35

answered Jul 13 '16 at 11:24

nitzanerman

104
1
6

score 1 · Answer 3 · answered Jul 13 '16 at 11:41

This is what I did to achieve the attached image. Not very neat but I hope you get the point.

select{
            -webkit-appearance: none;
            border: 2px solid #bbb;
            background: #fff;
            padding: 10px;
            width: 200px;
            background: url(downarrow.png) no-repeat right white;
            z-index: 100;
        }

My test form

Display text below other text also need space between text and dropdown symbol

3 Answers3