Welches HTML/CSS würden Sie verwenden, um eine Texteingabe mit einem Hintergrund zu erstellen?

Question

Ich habe eine Website entworfen, die Texteingabefelder enthält, die wie folgt aussehen:

Eingabefeld http://img401.imageshack.us/img401/4453/picture1ts2.png

Ich frage mich, was die beste Lösung für die Erstellung dieses Eingabefeldes ist.

Eine Idee, die ich habe, ist immer ein div um die Eingabe mit einem Hintergrundbild und alle Grenzen deaktiviert auf das Eingabefeld und angegebene Breite in Pixel, wie z. B. haben:

<div class="borderedInput"><input type="text" /></div>

Ich habe versucht, sie davon abzubringen, dieses Format zu verwenden, aber sie lassen sich nicht entmutigen, also muss ich es wohl tun.

Ist dies die beste Lösung oder gibt es eine andere Möglichkeit?

--

Versuch:

Ich habe Folgendes versucht:

<style type="text/css">
input.custom {
    background-color: #fff;
    background:url(/images/input-bkg-w173.gif) no-repeat;
    width:173px;
    height:28px;
    padding:8px 5px 4px 5px;
    border:none;
    font-size:10px;
}
</style>
<input type="text" class="custom" size="12" />

aber im IE (6 & 7) macht es folgendes, wenn Sie mehr als die Breite eingeben:

Überlänge http://img240.imageshack.us/img240/1417/picture2kp8.png

Answer 1

Ich würde es so machen:

<style type="text/css">
div.custom {
    background:url(/images/input-bkg-w173.gif) no-repeat;
    padding:8px 5px 4px 5px;
}
div.custom input {
    background-color: #fff;
    border:none;
    font-size:10px;
}
</style>
<div class="custom"><input type="text" class="custom" size="12" /></div>

Sie müssen nur die Auffüllungswerte anpassen, damit alles richtig passt. Das ist - in meinen Augen - definitiv die beste Lösung, da man in jedem anderen Fall mit einem ganzen Eingabefeld arbeitet. Und das ganze Eingabefeld ist - per Definition - ein Feld, in das die Benutzer Text eingeben können.

Wenn Sie sich auf JavaScript verlassen können, können Sie solche div-Elemente programmgesteuert um Ihre Eingabefelder wickeln.

Edit : Mit jQuery kann man das so machen:

$( 'input.custom' ).wrap( '<div class="custom"></div>' );

CSS:

div.custom {
    background:url(/images/input-bkg-w173.gif) no-repeat;
    padding:8px 5px 4px 5px;
}
input.custom {
    background-color: #fff;
    border:none;
    font-size:10px;
}

Und Ihr HTML:

<input class="custom" ... />

Answer 2

Sie brauchen das div-Element nicht, Sie können der Eingabe direkt einen Hintergrund zuweisen.

Edit : Hier ist der funktionierende Code. Ich habe ihn getestet, aber Sie müssen ihn an Ihre Bedürfnisse anpassen. Soweit ich das beurteilen kann, wird alles hier benötigt.

input {
    background: #FFF url(test.png) no-repeat bottom right;
    width: 120px;
    height: 20px;
    line-height:20px;
    padding:0;
    text-indent:3px;
    margin:0;
    border: none;
    overflow:hidden;
}

Bearbeiten2: Ich bin mir nicht ganz sicher, warum ich abgelehnt werde, aber diese Methode sollte funktionieren, es sei denn, Sie benötigen ein Bild, das größer ist als das Eingabeelement selbst. In diesem Fall sollten Sie das zusätzliche div-Element verwenden. Wenn das Bild jedoch die gleiche Größe wie die Eingabe hat, besteht keine Notwendigkeit für das zusätzliche Markup.

Bearbeiten3: Ok, nachdem bobince mich auf ein Problem hingewiesen hat, komme ich dem Ganzen etwas näher. Dies wird in IE6 & 7 funktionieren und es ist nah in FF, aber ich bin immer noch auf diesen Teil zu arbeiten.

input {
    background: #FFF url(test.png) no-repeat 0px 0px;
    background-attachment:fixed;
    width: 120px;
    height: 20px;
    line-height:20px;
    padding:0px;
    text-indent:3px;
    margin:0;
    border: none;
}
body>input {
    background-position:13px 16px;
}

Bearbeiten4 : Ok, ich glaube, ich habe es dieses Mal, aber es erfordert die Verwendung eines CSS3-Selektors, so dass es nicht als CSS 2.1 validiert.

input { 
    background: #FFF url(test.png) no-repeat 0px 0px;
    background-attachment:fixed;
    width: 120px;
    height: 20px;
    line-height:20px;
    padding:0px;
    text-indent:3px;
    margin:0;
    border: none;
}
body>input { 
    background-position:13px 16px;
}
body>input:enabled { 
    background-position:9px 10px;
}

body>input zielt auf alles außer IE6, body>input:enabled zielt auf alle Formularelemente, die nicht für alle Browser außer IE 6, 7 und 8 deaktiviert sind. Da :enabled jedoch ein CSS3-Selektor ist, wird er nicht als CSS2.1 validiert. Ich war nicht in der Lage, einen geeigneten CSS2-Selektor zu finden, mit dem ich den IE7 von den anderen Browsern trennen könnte. Wenn die Nicht-Validierung (noch, bis der Validator zu CSS3 wechselt) ein Problem für Sie ist, dann denke ich, Ihre einzige Option ist das zusätzliche div-Element.

Answer 3

Haben Sie die Verwendung eines solchen Hintergrundbildes geprüft?

<style type="text/css"> 
  input{ 
  background-color: #AAAAAA; 
  background-image: url('http://mysite.com/input.gif'); 
  border: 0px; 
  font-family: verdana; 
  font-size: 10px; 
  color: #0000FF; 
}

Answer 4

Ich habe das schon ein paar Mal gemacht. Ich habe das Hintergrundbild innerhalb eines div und verwenden css, um das Eingabefeld entsprechend zu positionieren.

Werfen Sie einen Blick auf die folgende Website, die ich mit dieser Technik erstellt habe, und verwenden Sie den Code: http://www.ukoffer.com/ (Rechte Seite Newsletter)

Answer 5

AFAIK kann das Problem des Scrollens im Hintergrund entweder in Firefox und seinen Freunden ODER in Internet Exploder gelöst werden, was aber nicht alle auf einmal glücklich macht.

Ich würde normalerweise gesagt haben, um die Eingabe direkt Stil, aber jetzt, dass ich daran denke, dass div Beispiel klingt nicht allzu schlecht und sollte kümmern sich um Ihre Hintergrundbild Scrollen Problem.

In diesem Fall würden Sie ein div als position:relative setzen und die Eingabe darin mit richtiger Auffüllung und Breite (oder 100% Breite, wenn die Auffüllung 0 ist), transparentem Hintergrund und einem Bild auf dem div platzieren.