CODEWITHSUNDEEP
htmlcss
fresher
fresher

Reputation: 911

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

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

enter image description here

I want to make like this :

enter image description here

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.

Upvotes: 0

Views: 226

Answers (3)

Elizabeth Oyekunle
Elizabeth Oyekunle

Reputation: 56

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

Upvotes: 1

nitzanerman
nitzanerman

Reputation: 104

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/

Upvotes: 1

Mindaugas M.
Mindaugas M.

Reputation: 121

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

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

Upvotes: 3

Related Questions