如何设置选项样式

Question

我正在努力使select选项更广泛，但我无法让它发挥作用。我试过width，但它对我不起作用。我也在网上找不到任何东西。 我希望有人可以帮助我。

这是我的HTML：

<form action="" method="post">
<legend>Neem contact op</legend>
<table>
    <tr>
        <td>
            <label for="Naam">Naam: </label>
        </td>
        <td>
            <input type="text" id="Naam" name="Naam" placeholder="Naam" required="required" />
        </td> 
    </tr>
    <tr>
        <td>
            <label for="Email">Email :</label>
        </td>
        <td>
            <input type="email" id="Email"name="Email" placeholder="Email" required="required" />
        </td>
    </tr>
    <tr>
        <td>
            <label for="Seizoen">Seizoen: </label>
        </td>
        <td>                                                                  
            <select name="Seizoen" id="Seizoen" required>
            <option value="">Kies hier je seizoen</option>
                <option value="Lente">Lente</option>
                <option value="Zomer">Zomer</option>
                <option value="Herfst">Herfst</option>
                <option value="Winter">Winter</option>
            </select>
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <hr />  
        </td>
    </tr>
    <tr>
        <td>
            <label for="benodigheden1">Benodigheden:</label>
        </td>
        <td>
            <input type="text" id="benodigheden1"name="benodigheden1" placeholder="Benodigheden" required="required" />
        </td>
    </tr>
    <tr>
        <td>
            <label for="ingrediënten1">Ingrediënten:</label>
        </td>
        <td>
            <input type="text" id="ingrediënten1"name="ingrediënten1" placeholder="Ingrediënten" required="required" />
        </td>
    </tr>
    <tr>
        <td>
            <label for="stappenplan">Stappenplanm:</label>
        </td>
        <td>
            <textarea name="stappenplan" id="stappenplan" cols="40" rows="5" placeholder="Stappenplan" required="required" /></textarea>
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <hr />
        </td>
    </tr>
    <tr>
        <td>
            <label for="Opmerking">Opmerking:</label>
            </td>
        <td>
            <textarea name="Opmerking" id="Opmerking" cols="40" rows="5" placeholder="Opmerking" required="required" /></textarea>
            </td>
    </tr>
    <tr>
        <td>
        </td>
        <td>
            <div class="submit"><input type="submit" value="Verzenden" name="Verzenden" /></div>
        </td>
    </tr>
</table>

以下是指向JSFiddle的链接。

Answer 1

请参阅此fiddle

您必须添加以下CSS才能为select

设置样式

select{
    width: 300px;
}

Answer 2

最好的选择是尝试padding喜欢;

select{
    padding: 20px;
}

Here 是演示..