你应该了解的 4 个 CSS 的技巧

小编辑 发布于 2011/10/04 06:23
阅读 1K+
收藏 34
CSS

CSS 是充满乐趣的,你做得越多就越了解它。你可能已经看到很多 CSS 的技巧,但可能会忽视其背后的实现。我有这4个CSS技巧,或许你还不太熟悉,看看吧。

1. 在设计中融入文本输入框 (Merge Textboxes into your Design)

下面这段代码用于移除文本框的边框,并让其背景透明,在一些图形中集成文本输入框的时候非常有用。

input[type='text'] {
    border: 0;
    outline: none;
    outline-offset: 0;
    background:transparent;
    padding:0px;
}

2. 设置被禁用的输入框的样式 (Access the disabled Textboxes)

有时候,被禁用的文本输入框的背景可能让你的用户觉得不爽,因为默认是灰色的,下面是如何修改被禁用的文本框的方法:

input[disabled]{
  color:red;
  background:transparent;
}

3. 修改被选择文本的颜色 (Change the default selection text color)

当用户选择了网页上的一段文本时,你想修改被选择文本的颜色,可以使用下面代码,不过只支持基于 Webkit 的浏览器,例如 firefox:

::selection{
  background-color:orange;
  color:green;
}
::-moz-selection{
  background-color:orange;
  color:green;
}
::-webkit-selection{
  background-color:orange;
  color:green;
}

4. 修改网页滚动条的样式 (Change the Look and Feel of scroll bars)

该方法仅限 webkit 浏览器,例如 firefox

::-webkit-scrollbar {
margin-right: 5px;
background-color: #EEE;
width: 7px;
}

::-webkit-scrollbar:horizontal {
margin-right: 5px;
background-color: #EEE;
height: 7px;
}

::-webkit-scrollbar-thumb {
border: 1px #EEE solid;
border-radius: 12px;
background: #777;
-webit-box-shadow: 0 0 8px #555 inset;
box-shadow: 0 0 8px #555 inset;
-webit-transition: all .3s ease-out;
transition: all .3s ease-out;
}

::-webkit-scrollbar-track {
-webit-box-shadow: 0 0 2px #ccc;
box-shadow: 0 0 2px #ccc;
}

你还有什么其他的技巧,更大家分享分享吧。
加载中
0
0
谦谦君子
谦谦君子
该方法仅限 webkit 浏览器,例如 firefox.....这个,firefox用的是Gecko吧,chrome和safari采用的是webkit。。。。
0
谦谦君子
谦谦君子
我在chrome上使用最后一个怎么滚动条没有用呢。。。
0
游客
游客
学习学习。 下次截些效果图就更妙了。
0
Cherrot
Cherrot
该方法仅限 webkit 浏览器,例如 firefox.....这个,firefox用的是Gecko吧,chrome和safari采用的是webkit。。。。
+1 

0
清凌渡
清凌渡
属性选择器,IE6都不支持哎。。 
返回顶部
顶部