Problem with select/option not showing text

Question

Simon_4 0 Light Poster

11 Years Ago

Hi

I just have the follow problem. In my form, I have a select option. Usually I should see some text there, I can change and open the dropdown menu, but I not see any text. What it could be?

Here is the url:

And here some html code:

<form action="/memberd/enquiry.php"  method="post" id="genForm">
                    <h3 class="colour-holiday">Bitte geben Sie Ihre Daten ein</h3>
                    <p>Mit * gekennzeichnete Felder sind Pflichtfelder. <br />
Mit ** gekennzeichneten Felder sind Pflichtfelder, entweder Sie wählen eine Dienstleistung aus oder füllen das Feld für einen Anfrage aus.</p>

                    <label>Name: <i>*</i></label> <input type="text" size="22" name="sender" id="sender" class="name" required />
                    <label>E-Mail: <i>*</i></label> <input type="email" size="22" name="email" id="email" class="email" required />
                    <label>Adresse: </label> <input type="text" name="address" id="address1" class="address" />
                    <label>Stadt: </label> <input type="text" name="city" id="town" class="city" />
                    <label>Land: </label> <input type="text" name="country" id="county" class="country" />
                    <label>PLZ: </label> <input type="text" class="postcode" name="postcode" id="postcode" />
                    <label>Mobile Nr: </label> <input type="text" size="22" name="contactno" id="contactno" class="contactno" />
                    <label>An welchem Kurs sind Sie interessiert? <i>**</i></label><select name="service" id="ddlCottages" class="selservice">
                    <option value="no course was selected">Bitte wählen Sie</option>
                                <option value="Schnuppertauchen">Schnuppertauchen</option>
<option value="PADI Scuba Diver">PADI Scuba Diver</option>
<option value="Open Water Diver">Open Water Diver</option>
<option value="PADI ADVANCED OPEN WATER DIVER">PADI ADVANCED OPEN WATER DIVER</option>
<option value="PADI EMERGENCY FIRST RESPONSE (EFR)">PADI EMERGENCY FIRST RESPONSE (EFR)</option>
<option value="Rescue Diver">Rescue Diver</option>
<option value="PADI DIVEMASTER">PADI DIVEMASTER</option>
<option value="Tauchausflug nach Koh Tao">Tauchausflug nach Koh Tao</option>
<option value="Tauchausflug nach Sail Rock">Tauchausflug nach Sail Rock</option>
<option value="Inselsafari">Inselsafari</option>
<option value="Schnorcheltour nach Koh Nang Yuan">Schnorcheltour nach Koh Nang Yuan</option>
<option value="Sunset Cruise">Sunset Cruise</option>
                            </select>
                            <label>Hotel: </label> <input type="text" size="22" name="hotel" id="hotel" class="hotel" />
                            <label>Anreisetermin: </label><input id="datetimepicker" name="arrivaldate" type="text">
                            <label>Anfrage: <i>**</i></label> <textarea name="comments" id="comments" class="contact-message" cols="20" rows="4" ></textarea>
                        <input type="hidden" name="subject" value="Enquiry from Booking" />
                        <input type="hidden" name="lang" value="de" />
                        <br />
                        <input class="submit btn-medium style-color" type="submit" value="Submit Enquiry"/>

                        </form>

and here my css:

.contact-form{
    float: left;
    width: 100%;
}

.contact-form form{
    padding-right: 20px;
    position: relative;
    top: -10px; 
    width: 100%;
}

.contact-form label{
    width: 100%;
    font: 12px 'Droid Sans', sans-serif;
    color: #ECD374;
    display: block;
    margin-bottom: 15px;
    margin-top: 15px;
}

.contact-form .name, .contact-form .email, .contact-form .address, .contact-form .city, .contact-form .country, .contact-form .postcode, .contact-form .contactno, .contact-form .hotel{
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 2px;
    width: 300px;
    height: 12px;
    font: 12px 'Droid Sans', sans-serif;
    padding: 10px;
    color: #ECD374;

    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.contact-form .selservice{
    background: #FFFFFF;
    border: 1px solid #ccc;
    border-radius: 2px;
    width: 300px;
    height: 12px;
    font: 12px 'Droid Sans', sans-serif;
    padding: 10px;
    color: #000000;

    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.contact-form .contact-message{
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 2px;
    width: 438px;
    font: 12px 'Droid Sans', sans-serif;
    line-height: 22px;
    padding: 10px;
    color: #ECD374;
}

.contact-form .submit{
    color: #fff;
    font: bold 12px 'Droid Sans',sans-serif;
    cursor: pointer;
}

.contact-form .name:focus, .contact-form .email:focus, .contact-form .contact-message:focus{
    border-color: #aaa;
}

html-css web-design

2 Contributors
1 Reply
347 Views
48 Minutes Discussion Span
Latest Post 11 Years Ago Latest Post by pritaeas

Dani AI

Generated 9 Months Ago

Good catch by — the explicit height: 12px on the select is the root cause. With substantial vertical padding applied, the browser ends up with essentially no usable area to render the selected option text, so the control looks empty even though the dropdown works.

Why that happens: fixed small heights and padding interact badly (and native select rendering varies by platform). If the content area is smaller than the line-height or the browser’s native rendering expects more space, the text will be clipped or hidden. Native form controls are also rendered differently by OS/UA, so overly tight sizing is fragile.

Practical fixes (pick one):

Remove the explicit height so the select sizes to its font and padding (this is the simplest and what fixed it in the thread).
If a fixed height is required, use box-sizing: border-box and choose a height large enough to include vertical padding, or set a sensible min-height that accommodates font-size + padding.
Alternatively, eliminate vertical padding and use line-height equal to the control height to vertically center text.
Keep color and background contrasts in mind if text still seems invisible.

Quick troubleshooting steps: open DevTools, inspect the select’s computed height, padding, and line-height; toggle/remove height to confirm the cause; add a temporary border/background to visualize the box; and test across browsers (Windows/macOS/mobile) because select styling behavior differs. Finally, avoid tiny control heights for accessibility—allow enough room for readable text.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

pritaeas 2,276 Most Valuable Poster Moderator Featured Poster · Answer 1 · 2015-02-17T15:41:07+00:00

If I remove the height: 12px; from .selservice it shows again. That's because with the padding of 10px, a height of 12px only shows the whitespace of the padding.