William
William

Reputation: 156

How to style a option

I am trying to make the select option wider but I cant get it to work. I have tried with width but it didn't work for me. I also couldn't find anything on the internet. I hope somebody can help me.

This is my 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>

Here is a link to JSFiddle.

Upvotes: 1

Views: 62

Answers (2)

Alfred
Alfred

Reputation: 21406

The best option is to try padding like;

select{
    padding: 20px;
}

Here is the demo..

Upvotes: 1

Lal
Lal

Reputation: 14810

See this fiddle

You have to add the below CSS for styling the select

select{
    width: 300px;
}

Upvotes: 2

Related Questions