SEARCHFORM dem Layout anpassen

Hallo,

ich versuche länger erfolglos ein searchform an mein Layout anzupassen. Das Textfeld soll eine bestimmte Höhe und Breite haben, sowie eine Rahmenfarbe mittels CSS zugewiesen bekommen. Außerdem soll es einen Grafik-Button geben.

Hier mein TS:

   SEARCH < tt_content.search.30
   SEARCH {
      target = _self
      redirect = 42
      badMess = Bitte geben Sie ein Suchwort ein!
      layout = ###FIELD###
      stdWrap.wrap = <div class="suchen"> | </div>
      dataArray.10 {
         label = Suchen:
         type = *sword = input, 10, 30
      }
      dataArray.20 {
         valueArray >
         type = scols = hidden
         value = pages.title-subtitle-keywords-description:tt_content.header-bodytext-imagecaption
      }
      image = IMAGE
      image.file = fileadmin/images/suchleiste_suchen.gif
      image.file.width = 18
      image.file.height = 18
   }

Mein CSS:

.suchen input {
	font-family: Verdana,Arial;
	font-size: 10px;
	color: #000000;
	border-left: #A5A5A5 1px solid;
	border-right: #A5A5A5 1px solid;
	border-top: #A5A5A5 1px solid;
	border-bottom: #A5A5A5 1px solid;
	background: #FFFFFF;
	width: 130px;
	height: 16px;
}

Mit diesem Code bekomme ich folgende Ausgabe:

<form action="suche/?no_cache=1" name="da944b24733413b7db022d721b9676bb" enctype="multipart/form-data" method="post" target="_self" onsubmit="return validateForm('da944b24733413b7db022d721b9676bb','sword,Suchen%3A','','Bitte%20geben%20Sie%20ein%20Suchwort%20ein%21','')"><div style="display:none;"><input type="hidden" name="scols" value="pages.title-subtitle-keywords-description:tt_content.header-bodytext-imagecaption" /><input type="hidden" name="stype" value="L0" /><input type="hidden" name="locationData" value="42:pages:42" /></div><div class="suchen"><input type="text" name="sword" size="10" maxlength="30" value="" /><input type="image" name="submit" src="fileadmin/images/suchleiste_suchen.gif" width="18" height="18" border="0" alt="" title="" /></div></form>

Wie man sieht, umschließt der <div>-Tag nun sowohl das Textfeld sowie den Grafik-Button. Damit wird auch der Button mit der angegebenen Größe im CSS dargestellt.

Gibt es eine Möglichkeit nur das Textfeld per CSS anzupassen?

Gruß
Marcel

Zum Contentrendering generell CSS styled Content benutzen und im CSS die Formatierungen anpassen.
Die sind standardmäßig:

y */
FORM TABLE.csc-mailform TR TD.csc-form-labelcell  { }

/* Search form, specifically */
FORM TABLE.csc-searchform { width: 100%; }
FORM TABLE.csc-searchform TR TD { padding: 5px 5px 5px 5px; }
FORM TABLE.csc-searchform TR TD.csc-form-labelcell, FORM TABLE.csc-searchform TR TD.csc-form-commentcell { font-weight: bold; }
FORM TABLE.csc-searchform TR TD.csc-form-fieldcell INPUT, FORM TABLE.csc-searchform TR TD.csc-form-fieldcell SELECT { width: 100%; }

/* Login form, specifically */
FORM TABLE.csc-loginform { width: 70%; }


/*****************/
/* Search result */
/*****************/

/* Search Result, result information box: */
TABLE.csc-searchResultInfo { margin-left: 0px; margin-top: 10px; width: 100%;}
TABLE.csc-searchResultInfo TR { background-color: #EDEBF1; }
TABLE.csc-searchResultInfo TR TD P { padding: 0px 5px 0px 5px;}
TABLE.csc-searchResultInfo TR TD.csc-searchResultRange P { font-weight: bold; }
TABLE.csc-searchResultInfo TR TD.csc-searchResultPrevNext { text-align: right; }

/* Search Result, header + abstract: */
H3.csc-searchResultHeader A { color: #186900; }
H3.csc-searchResultHeader { background-color: #EDEBF1; font-size: 14px; padding-left: 5px; }
P.csc-searchResult { font-style: italic; margin-left: 20px;}

/* Search word markup */
SPAN.csc-sword { font-weight: bold; color: red; }