Klaus: Warum ist die Darstellung nicht korrekt?

Beitrag lesen

Hallo,

ich habe ein kleines Eingabeformular erstellt und mit CSS aufhübschen wollen.
Aber einige von mir definierte Eigenschaften werden nicht korrekt dargestellt und ich sehe offenbar (mal wieder) den Wald vor lauter Bäumen nicht.
Zum Einen wird nur das zweite Eingabefeld vom Browser (FF 15.01) als Pflichtfeld markiert und zum Anderen soll der Button abgerundete Ecken haben, wird aber nicht angezeigt.

Hier der HTML-Teil:

  
<div id="form-wrapper">  
    <form method="post" action="#">  
        <label for="vorname">Vorname: <span class="required">*</span></label>  
        <input type="text" id="vorname" name="vorname" value="" required="required" autofocus="autofocus" />  
        <label for="nachname">Nachname: <span class="required">*</span></label>  
        <input type="text" id="nachname" name="nachname" value="" required="required" />  
        <label for="email">Email: <span class="required">*</span></label>  
        <input type="email" id="email" name="email" value="" placeholder="johndoe@example.com" required="required" />  
        <label for="telephone">Telephone: </label>  
        <input type="tel" id="telephone" name="telephone" value="" />  
        <label for="abteilung">Abteilung: </label>  
        <select id="abteilung" name="abteilung" size="1">  
            <option value="general">General</option>  
            <option value="sales">Sales</option>  
            <option value="support">Support</option>  
        </select>  
        <label for="message">Beaschreibung: <span class="required">*</span></label>  
        <textarea id="message" name="beschreibung" placeholder="Your message must be greater than 20 charcters" required="required" data-minlength="20"></textarea>  
        <input type="submit" value="Absenden" id="submit-button" />  
        <p id="req-field-desc"><span class="required">*</span> indicates a required field</p>  
    </form>  
</div>  

Und hier das dazugehörige CSS:

  
	#form-wrapper {  
		background-color:#F2F7F9;  
		width:465px;  
		padding:15px;  
		margin: 50px auto;  
		border: 6px solid #8FB5C1;  
		-moz-border-radius:15px;  
		-webkit-border-radius:15px;  
		border-radius:15px;  
		position:relative;  
	}  
	#form-wrapper h1 { font-size:42px; }  
	#form-wrapper h2 { margin-bottom:15px; font-style:italic; font-weight:normal; }  
	#form-wrapper input, #form-wrapper select, #form-wrapper textarea, #form-wrapper label { font-size:12px; margin-bottom:2px; }  
	#form-wrapper input, #form-wrapper select, #form-wrapper textarea { width:450px; border: 1px solid #CEE1E8; margin-bottom:5px; padding:4px; }  
	#form-wrapper input:focus, #form-wrapper select:focus, #form-wrapper textarea:focus { border: 1px solid #AFCDD8; background-color: #EBF2F4; }  
	#form-wrapper textarea { height:150px; resize: none; }  
	#form-wrapper label { display:block; }  
	#form-wrapper .required { font-weight:bold; color:#F00; }  
	#form-wrapper #submit-button {  
		width: 100px;  
		background-color:#333;  
		color:#FFF;  
		display:block;  
		float:right;  
		margin-bottom:0px;  
		margin-right:6px;  
		background-color:#8FB5C1;  
		-moz-border-radius:15px;  
		-webkit-border-radius:15px;  
	}  
	#form-wrapper #submit-button:hover { background-color: #A6CFDD;	}  
	#form-wrapper #submit-button:active { position:relative; top:1px; }  
	#req-field-desc { font-style:italic; }  
	::-webkit-input-placeholder { color:#CCC; font-style:italic; }  
	input:-moz-placeholder, textarea:-moz-placeholder { color:#CCC; font-style:italic; }  
	input.placeholder-text, textarea.placeholder-text { color:#CCC; font-style:italic; }