Kontaktformular: riesige Schriftgröße in Select-Feldern

color-it · 28.12.2007, 14:04

Hallo,

wie kann man in einem Kontaktformular die Schriftgröße für die Select-Felder/Pull-downs verändern?

Im Firefox gehts ja gerade noch, aber im 6er IE ist das "Newsletter bestellen" riesig, 11px hätte ich mir vorstellt.

Wie und wo kann ich dafür die korrekte Syntax eingeben?
Danke.

webcreate · 28.12.2007, 14:29

Mittels CSS

Code:

input { font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular; color: #000; font-size: .7em;}

color-it · 28.12.2007, 15:17

Danke, das war es aber offenbar nicht.

Die Datei sieht jetzt so aus:

Code:

<script language=JavaScript>
<!--
 function isValid() { 

   var msg = "";
   
   if (kontaktFormular.eMail.value.indexOf("@") < 1 ||
       kontaktFormular.eMail.value.indexOf(".") < 1) {
     msg += "- Die E-Mail-Adresse ist syntaktisch nicht korrekt.\n";
   }
   
   if(kontaktFormular.vorName.value == "") {
     msg += "- Leeres Feld: Vorname:\n";
   }

   if(kontaktFormular.nachName.value == "") {
     msg += "- Leeres Feld: Nachname:\n";
   }



   
   
   if(msg == "") {
     return true;   
   }
   alert(msg);
   return false;
 }
-->
</script>
<link href="format-mag-bodyweiss.css" rel="stylesheet" type="text/css" media="all">



<body bgcolor="#e5e5e5">
	<div class="klein">
		<b><?php
  
  $formularAnzeigen = false;
  if (!empty($_POST["senden"]) && (
      empty($_POST["vorName"]) ||
      empty($_POST["nachName"]) ||
      empty($_POST["eMail"]) ||
      empty($_POST["betreff2"]))) {
    $formularAnzeigen = true;
    echo '<span style="color: #FF0000; font-size: x-large;">Bitte alle Felder ausfuellen.</span>';
  } else if (!empty($_POST["senden"]) &&
             !isEmail($_POST["eMail"])) {
    $formularAnzeigen = true;  
    echo '<span style="color: #FF0000; font-size: x-large;">Die E-Mail-Adresse ist nicht korrekt.</span>';
  } else if (empty($_POST["senden"])) {
    $formularAnzeigen = true;  
  }
  if ($formularAnzeigen) {
?>Newsletter mit Infos zu Updates und<br>
			neuen Werken bestellen / abbestellen:</b>
		<form name="kontaktFormular" method="post" action="<?=$_SERVER[PHP_SELF]; ?>" onSubmit="return isValid()">
			<table width="280" border="0" align="left">
				<!--anfang vorName-->
				<tr>
					<td><img src="../pics/trans.gif" alt="" height="7" width="30" border="0"></td>
					<td></td>
				</tr>
				<tr>
					<td>
						<div class="klein">
							Vorname:
      </div>
					</td>
					<td><input name="vorName" type="text" value="<?=$_POST['vorName']; ?>" size="18" /></td>
				</tr>
				<!--ende vorName--><!--anfang nachName-->
				<tr>
					<td>
						<div class="klein">
							Nachname:
      </div>
					</td>
					<td><input name="nachName" type="text" value="<?=$_POST['nachName']; ?>" size="18" /></td>
				</tr>
				<!--ende nachName--><!--anfang eMail-->
				<tr>
					<td>
						<div class="klein">
							E-Mail:
      </div>
					</td>
					<td><input name="eMail" type="text" id="eMail" value="<?=$_POST['eMail']; ?>" size="18" /></td>
				</tr>
				<!--ende eMail--><!--anfang betreff2-->
				<tr>
					<td>
						<div class="klein">
							<strong>Bitte w&auml;hlen:</strong></div>
					</td>
					<td><select name="betreff2" id="betreff2">
							<option<?=($_POST['betreff2']=='Newsletter bestellen')?' selected':' '?>
						>Newsletter bestellen</option>
        
						<option<?=($_POST['betreff2']=='Newsletter abbestellen')?' selected':' '?>
						>Newsletter abbestellen</option>
      
						</select></td>
				</tr>
				<!--ende betreff2-->
				<tr>
					<td><font color="#e5e5e5">E-Mail: </font></td>
					<td></td>
				</tr>
				<tr>
					<td colspan="2">
						<div align="center">
							<input name="senden" type="submit" value="Senden" /></div>
					</td>
				</tr>
			</table>
		</form>
		<?php
  echo' ';
  } else {
    $eMail = '
        
Vorname:
'.$_POST['vorName'].'
        
Nachname:
'.$_POST['nachName'].'
        
E-Mail:
'.$_POST['eMail'].'
        
Bitte w?hlen: Newsletter bestellen/abbestellen
'.$_POST['betreff2'].'';
    
    if (@mail("bchform@arcor.de",
         "Newsletter www.birgit-heinz.de",
         $eMail)) {
      echo "Vielen Dank.<br />"; 
    } else {
      echo "E-Mail-Verkehr funktioniert zur Zeit nicht<br />";
    }
    if ($_POST['kopie']) {
      if (@mail($_POST['eMail'],
           "Hier die Kopie Ihrer Nachricht an mich",
           $eMail)) {
        echo "Sie haben eine Kopie der Nachricht zugeschickt bekommen.<br />";
      }
    }
  }
  
  function isEmail($email) {
    $nonascii      = "\x80-\xff"; 
    $nqtext        = "[^\\$nonascii\015\012\"]";
    $qchar         = "\\[^$nonascii]";
    $protocol      = "(?:mailto:)";
    $normuser      = "[a-zA-Z0-9][a-zA-Z0-9_.-]*";
    $quotedstring  = "\"(?:$nqtext|$qchar)+\"";
    $user_part     = "(?:$normuser|$quotedstring)";
    $dom_mainpart  = "[a-zA-Z0-9][a-zA-Z0-9._-]*\.";
    $dom_subpart   = "(?:[a-zA-Z0-9][a-zA-Z0-9._-]*\.)*";
    $dom_tldpart   = "[a-zA-Z]{2,5}";
    $domain_part   = "$dom_subpart$dom_mainpart$dom_tldpart";
    $regex         = "$protocol?$user_part\@$domain_part";
    if (preg_match("/^$regex$/",$email)) {
      return true;
    }
    return false;
  }
?></div>
</body>

Und in die externe CSS-Datei hab ich deines mit eingefügt, sogar noch auf magenta gestellt, damit es auch - erstmal - auffällt:

Code:

a:link { color: #b60057; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-decoration: none; }
a:visited { color: #c17499; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-decoration: none; }
a:hover { color: black; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-decoration: none; }
a:active { color: #b60057; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-decoration: none; }
.mini { color: white; font-size: 10px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; }
.klein { color: black; font-size: 11px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; }
.groesser { color: black; font-size: 13px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; }

img { border: none; }

body { color: white; background-image: none; }

input { font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular; color: fuchsia; font-size: 11px;}

Die beiden Zeilen "Newsletter bestellen" bzw. "Newsletter abbestellen" sind immernoch ewig riesig.

color-it · 28.12.2007, 15:20

Jetzt hab ich's:

die CSS dar nicht "input" heißen, sondern "select" - jetzt gehts auch!

webcreate · 28.12.2007, 15:29

Hatte das select-feld oben überlesen ... aber nun weißt Du wenigstens, wie man ein input Feld anpasst.

color-it · 28.12.2007, 16:00

Genau!

Sehr gut, danke dir!!