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: http://web159.login-142.hoststar.ch/memberd/de/prices/

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;
}

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.

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.