Skip navigation.

一点笔记

简洁不等于简陋

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

, ,

来这里的朋友可能已经发现了,鼠标在划过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无法显示这种效果
我要啦免费统计

Opera Blog模板#5.Hotaru11.19 相册更新

Comments

Nicholas 13. November 2006, 23:44

写得不错,很干净的blog,第一次来,留个脚印

Yuki 18. November 2006, 07:37

blog真的很乾淨.

代碼,暫時還是沒時間搞tt___tt

Jack 19. November 2006, 06:24

又来你这里参观学习了...

How to use Quote function:

  1. Select some text
  2. Click on the Quote link

Write a comment

Comment
(BBcode and HTML is turned off for anonymous user comments.)

If you can't read the words, press the small reload icon.


Smilies