猫喵 - [CSS笔记]输入框的激活效果

[CSS笔记]输入框的激活效果

Saturday, 11. November 2006, 14:29:22

来这里的朋友可能已经发现了，鼠标在划过Blog搜索框处时会有很好看的颜色变化效果，实现的代码如下：

/* 美化输入框和文字框 */
input, textarea{
border-width: 1px; /*边框宽1像素*/
border-style: solid; /*边框样式为实线*/
border-color: #CCC #EEE #EEE #CCC; /*边框颜色,表现为凹陷效果*/
background-color: #FCFCFC; /*背景色*/
} 

/* 输入框激活和聚焦时的效果 */
input:hover,input:focus{
background: #fff9ed;/*背景色*/
}

如果你仅仅想让Blog搜索框实现这样的效果的话,只需加入下面的代码:

#searchbox {
border-width: 1px; 
border-style: solid; 
border-color: #CCC #EEE #EEE #CCC; 
background-color: #FCFCFC;
}

#searchbox:hover,#searchbox:focus{
background: #fff9ed;
}

注意:IE6无法显示这种效果