Sie sind hier: Home > HTML & CSS > CSS - Hübsch...

CSS - Hübsche Textfelder

Stand vom 01.04.2003
In diesem Artikel haben wir für Sie ein paar Variationen an Textfeldern mit CSS erstellt - nur um Anregungen zu geben. Das Kopieren des CSS-Codes ist erlaubt...

Fachbegriffe
 Linktipps
 GPS Navigation   Webhosting inkl. Domain für Einsteiger und Profis.   AWD Erfahrung

Variante 1:
 Der obere Rahmen ist offen, links und rechts hat das Formular
Screenshot - CSS Textfeld Typ 1

<style type="text/css">
input {
border: none;
border-bottom: 2 dotted aqua;
border-left: 2 dotted aqua;
height: 18px;
font-size: 13px;
font-weight: bold;
}
</style>

Zunächst wird definiert, das das Element keinen Rahmen haben soll. Die nächsten zwei CSS Anweisungen überschreiben diese Anweisunge, jedoch nur für den Unteren (bottom), und oberen Rahmen.

Variante 2:
Im Borrussia Dortmund Stil
Screenshot - CSS Textfeld Typ 2

<style type="text/css">
input {
border: 2 dotted yellow;
background: black;
height: 20px;
width: 100px;
color: yellow;
font-size: 12px;
font-weight: bold;
}
</style>


Variante 3a:
Hier bleiben die Seiten offen...
Screenshot - CSS Textfeld Typ 3a
<style type="text/css">
input {
border: none;
border-left: 2 solid red;
border-right: 2 solid red;
background: #CCCCCC;
color: red;
font-size: 12px;
font-weight: bold;
}
</style>

Variante 3b:
Screenshot - CSS Textfeld Typ 3b

<style type="text/css">
input {
border: none;
border-top: 2 solid red;
border-bottom: 2 solid red;
background: #CCCCCC;
color: red;
font-size: 12px;
font-weight: bold;
}
</style>

Variante 4:
 Mit dem Rahmentyp inset, wird ein Verlauf von Blau nach schwarz erreicht.
Screenshot - CSS Textfeld Typ 4
<style type="text/css">
input {
border: 2 inset blue;
font-size: 12px;
font-weight: bold;
}
</style>