分类目录归档:网页技术

使用CSS改变被选中文本样式

默认情况下,网页中文本被选中时的样式由操作系统决定,比如Mac下是淡蓝色背景黑色字体,而Windows下是深蓝色背景白色字体。但是经常看到有些网站,比如伯乐在线,在文本被选中情况下是蓝色背景和白色字体的,搭配网站的整体色调,看着非常舒服。于是好奇心起找了下资料,原来可以通过CSS3的::selection伪类选择器实现。

具体实现:
在css文件中加入:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
*::selection {
    background:#da2b2e;
    color:#fff;
}
 
*::-moz-selection {
    background:#da2b2e;
    color:#fff;
}
 
*::-webkit-selection {
    background:#da2b2e;
    color:#fff;
}

::selection加在一个*号后面表示匹配整站所有的元素。大家可以根据需求将::selection加在任意标签、class或者id选择器后边。::selection中可以定义的属性较少,只有color(文字颜色), background(文字背景), cursor(鼠标样式)和outline(文字边框),常用的也就color和background。目前高版本的主流浏览器均已支持该选择器。

效果图如下,感觉非常的高端洋气:
Snip20130722_62

--EOF--

JS实现文本框和搜索框的默认提示

先上效果,如下所示:

用户名:


当鼠标点击文本框时,提示信息消失,当不填写内容鼠标点击其他地方时,提示信息重新出现。这样的效果也可以用jQuery实现,但是能用几行JS搞定的东西用jQuery就有些大材小用了。下面是上述效果的源码:

1
2
3
用户名:<input type="text" name="username" id="username" value="6位长度以上的英文字母" 
onfocus="if(value=='6位长度以上的英文字母'){value=''}" 
onblur="if(value==''){value='6位长度以上的英文字母'}" size="30" />
1
2
3
4
<input type="search"  name="search" value="请输入关键字" 
onfocus="if(value=='请输入关键字'){value=''}" 
onblur="if(value==''){value='请输入关键字'}" size="30" />
<input type="submit" value="搜索" />

onfocus事件中的语句是在文本框对象在获得焦点时执行,onblur事件中的语句是在文本框对象在失去焦点时执行。

上述代码设置了文本框的value属性,当表单提交以后,即使用户没有输入任何值,默认value值还是会传出去,这会对表单的验证空值带来麻烦,因此需要在提交按钮(type="submit")或者后台处理表单的程序里进行判断,以验证文本域是否为空。例如表单验证用户名是否为空可以在提交按钮上加onclick事件处理:

1
2
onclick="if(document.getElementById('username').value=='6位长度以上的英文字母')
{document.getElementById('username').value==''}"

意思是当提交按钮点击后,id为'username'的文本框的值为默认值'6位长度以上的英文字母'时,将它设置为空值。

--EOF--