输入框文本选择时的背景色问题

近期在一个项目的开发过程中，开发童靴拿了一个问题问我，当时我十分纳闷为什么会出现那个问题，后来在CSS森林群里也问了，当时Leeiio跟我说他在window系统中是OK的，怀疑是我的系统主题有关系。因为我的系统主题使用的比较特别，个人也很喜欢（感谢pufen提供），但开发童靴那边是经典主题啊，十分纳闷。

今天抽空在半夜写下这篇日志，记录一下这个问题，不知道算不算是一个BUG吧。

问题来源是开发童靴在把鼠标焦点定位在文本输入框的时候，发现文字的背景颜色很淡，而且仅仅只是在IE浏览器才会这样，但是在其他个别文本输入框中选择文字的时候背景是深色的。
PS：该问题仅仅只是在IE浏览器中才会有，其他浏览器是正常的。

纳闷后发现跟文字的颜色定义有关系，当文本输入框中的文字颜色是淡色（例如#CCCCCC）时，选中的文字背景颜色也会是淡淡的颜色；而当文本输入框中的文字颜色是深色（例如#333333）时，选中的文字背景颜色也会是深色的。

带着这个怀疑，晚上简单做了一个输入框文本选择时的背景色问题的demo，然后找了3个朋友试了一下，结果如下图所示：

输入框文本选择时的背景色问题

输入框文本选择时的背景色问题


由图中可见对于window系统中，就算是使用了默认的系统主题也是有相同的问题出现的。

?View Code XML
1
2
3
4
5
6
7
8
9
10
11
12
13

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>输入框文本选择时的背景色问题</title>
</head>
 
<body>
<input type="text" value="选中后文字的背景色是怎么样的呢？" style="color:#CCCCCC;" />
<br />
<input type="text" value="选中后文字的背景色是怎么样的呢？" style="color:#333333;" />
</body>
</html>

考虑到文本输入框中原始文字颜色是要淡化的，而获得焦点的时候文字颜色是可以改变为深色，因此跟开发童靴沟通，当文本输入框获得焦点的时候改变文字的颜色为深色，那么不仅能解决IE浏览器中的问题，同时还可以给用户以突出显示的方式提醒。

对于这个问题我也不晓得算不算是一个BUG的问题，姑且暂时个人以为它就是一个浏览器的BUG吧。^O^

标签：,,
这篇文章发布于 2010年01月31日，星期天，00:28，归类于 扯扯页面。 您可以跟踪这篇文章的评论通过 RSS 2.0 feed。 您可以留下评论，或者从您的站点trackback。

发表在“输入框文本选择时的背景色问题”上的评论 4 条评论

  1. usual 说：
    2010/01/31于20:24

    希望WIN7能早点普及…

    回复
  2. SB 说：
    2010/01/31于09:25

    是不会做IE的吧？？？？ 页面重构师？？？？

    回复
  3. SB 说：
    2010/01/31于08:14

    不知道你们这些写CSS的咋想的，一个个的不做IE的。

    不做能行吗？

    回复
  4. SB 说：
    2010/01/31于08:11

    现实点把，不做IE的。有能耐了，你去改变这一现状

    回复

留下回复