Выберите элемент как часть текстового потока

Question

У меня небольшая проблема с отображением элемента select на моей веб-странице.Я пытаюсь показать элемент выбора как часть текстового потока, чтобы пользователь не заметил, что это на самом деле элемент выбора (кроме границы внизу).Это должно действовать как обычное слово.В настоящее время у меня есть этот код HTML:

<form method="get" action="population.php">
<p>Just show me information about only: <select name="f"><option>a</option><option>b</option></select>.</p>
</form>

И с этим этот код CSS:

form {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    display: inline;
}
form select {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    width: auto;
    border: 0px solid #FFFFFF;
    border-bottom: 1px solid #2C5E93;
    font-family: inherit;
    font-size: inherit;
    display: inline;
}

Этот код не работает.Это должно быть похоже на первую картинку, которую я выложил ниже.Однако в Safari выбранный элемент принудительно добавляется к первому элементу в строке, поэтому элемент выбора находится перед «only:» (второе изображение ниже).С другой стороны, в Firefox элемент select помещается в новую строку.

Кто-нибудь знает, как это исправить?Спасибо заранее!

Answer 1

Попробуйте это:

<style>
    .seldiv { display: inline; }
</style>

select
<div class="seldiv">
    <select>
        <option>123</option>
        <option>456</option>
    </select>
</div>
any