色々なスタイルのテキストボックス[CSS]

CSS Portalのエントリーより、CSSでつくる色々なスタイルのテキストボックスの紹介です。

textbox0806301.jpg


背景にイメージを適用させたり、アイコンを表示させたり、フォーカスさせたりと様々なスタイルがあります。

CSS


/* 異なったボーダー */
.tb-border {
    border: 1px solid #0000FF;
}

/* テキストボックスに背景色 */
.tb-background {
    background-color : #99FFCC;
    border: 1px solid #008000;
}

/* テキストボックスに背景イメージ: */
.tb-bg-image {
    background-image: url(bg.png);
    border: 1px solid #6297BC;
}

/* テkシウトボックスにフォーカス: */
.tb-focus {
    border: 1px solid #888377;
}
.tb-focus:focus {
    background-color: #F4EEDD;
}

/* テキストボックスにサイドイメージ: */
.tb-bg-side {
    background-image: url(Portal.gif);
    background-repeat:no-repeat;
    background-position:left;
    border: 1px solid #6297BC;
    padding-left:16px;
}

/* 角丸のテキストボックス: */
.tb-rounded {
    border:0;
    background: transparent url(rounded.gif) no-repeat top left;
    height: 22px;
    width: 230px;
    padding-top:2px;	
}

/* グラデーションのテキストボックス: */
.tb-gradient {
    border:0;
    background: transparent url(gradient.gif) no-repeat top left;
    height: 22px;
    width: 230px;
    padding-top:2px;
}

続きはコチラから