CSS 表单样式

Question

我正在努力做到这一点:

<form id="simple-search" name="simple-search" action="/search/" method="POST">
    <label for="simple-search-address">Location/Address</label>
    <input type="text" id="simple-search-address" name="address" value="" />
    <label for="simple-search-dob-day'">D.O.B.</label>
    <select name="dob-day" id="simple-search-dob-day"><option value="1" selected="selected">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option></select>
    <select name="dob-month" id="simple-search-dob-month"><option value="1" selected="selected">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select>
    <select name="dob-year" id="simple-search-dob-year"><option value="0">2009</option><option value="1">2008</option><option value="2">2007</option><option value="3">2006</option><option value="4">2005</option><option value="5">2004</option><option value="6">2003</option><option value="7">2002</option><option value="8">2001</option><option value="9">2000</option><option value="10">1999</option><option value="11">1998</option><option value="12">1997</option><option value="13">1996</option><option value="14">1995</option><option value="15">1994</option><option value="16">1993</option><option value="17">1992</option><option value="18">1991</option><option value="19">1990</option><option value="20">1989</option><option value="21">1988</option><option value="22">1987</option><option value="23">1986</option><option value="24">1985</option><option value="25">1984</option><option value="26">1983</option><option value="27">1982</option><option value="28">1981</option><option value="29">1980</option><option value="30">1979</option><option value="31">1978</option><option value="32">1977</option><option value="33">1976</option><option value="34">1975</option><option value="35">1974</option><option value="36">1973</option><option value="37">1972</option><option value="38">1971</option><option value="39">1970</option><option value="40">1969</option><option value="41">1968</option><option value="42">1967</option><option value="43">1966</option><option value="44">1965</option><option value="45">1964</option><option value="46">1963</option><option value="47">1962</option><option value="48">1961</option><option value="49">1960</option><option value="50">1959</option><option value="51">1958</option><option value="52">1957</option><option value="53">1956</option><option value="54">1955</option><option value="55">1954</option><option value="56">1953</option><option value="57">1952</option><option value="58">1951</option><option value="59">1950</option><option value="60">1949</option><option value="61">1948</option><option value="62">1947</option><option value="63">1946</option><option value="64">1945</option><option value="65">1944</option><option value="66">1943</option><option value="67">1942</option><option value="68">1941</option><option value="69">1940</option><option value="70">1939</option><option value="71">1938</option><option value="72">1937</option><option value="73">1936</option><option value="74">1935</option><option value="75">1934</option><option value="76">1933</option><option value="77">1932</option><option value="78">1931</option><option value="79">1930</option><option value="80">1929</option><option value="81">1928</option><option value="82">1927</option><option value="83">1926</option><option value="84">1925</option><option value="85">1924</option><option value="86">1923</option><option value="87">1922</option><option value="88">1921</option><option value="89">1920</option><option value="90">1919</option><option value="91">1918</option><option value="92">1917</option><option value="93">1916</option><option value="94">1915</option><option value="95">1914</option><option value="96">1913</option><option value="97">1912</option><option value="98">1911</option><option value="99">1910</option><option value="100">1909</option><option value="101">1908</option><option value="102">1907</option><option value="103">1906</option><option value="104">1905</option><option value="105">1904</option><option value="106">1903</option><option value="107">1902</option><option value="108">1901</option><option value="109">1900</option></select>    <input type="hidden" name="search-type" value="simple" />
    <input type="submit" id="simple-search-submit" name="submit" value="Search" />
</form>

看起来像:http://img686.imageshack.us/img686/8994/95340998.gif (注意最左边的 D.O.B. 框应该在左线上)

有什么想法吗？

Answer 1

即使在现代浏览器中，表单总是呈现略有不同，这也取决于您使用的操作系统，我认为内联 block 在下拉菜单之前是个好主意。

您听说过 jQuery UI Datepicker 吗？它非常强大，对用户和程序员更友好。