CSS - Hübsche TextfelderIn 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...

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>

Bookmark setzen... These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Bloglines
  • MisterWong
  • MySpace
  • Reddit
  • SEOigg
  • Technorati
  • TwitThis
  • Y!GG
  • Google Bookmarks

Weiterführende Links: