在其他文字下方显示文字也需要文字和下拉符号

Question

我们的品牌和型号下拉框看起来像this link，如下图所示

我想这样做：

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>'

?>

我们要在我的品牌下方显示我的模型，也希望在我的品牌文字和下拉符号之间留出空格。

Answer 1

您可以为下拉列表添加静态宽度，例如width: 150px;

以下是工作示例：https://jsfiddle.net/Mindaugas/17eLs0oz/

Answer 2

你可以将你的选择元素放在div元素中，以便它们符合你的要求。

您可以使用填充框之间的空格。

对于文本和下拉符号之间的空格，您可以使用宽度。

你可能会在这里看到一个例子： https://embed.plnkr.co/NypAPGHZmrBjh88nZfnW/

Answer 3

这是我为实现附加图像所做的。不是很整洁，但我希望你明白这一点。

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