利用CSS3实现文本框的清除按钮相关的一些效果

新技能：模拟动态清除按钮的搜索框体验

在网页设计中，搜索框是一个重要的交互元素。对于search类型的输入框，许多浏览器会自动添加一个清除按钮，方便用户清除输入内容。不同浏览器的实现方式和效果存在差异。为了确保良好的用户体验，我们可以借助HTML和CSS来模拟这一功能。

在许多现代浏览器中，如Chrome，为search类型的输入框提供了一个动态的清除按钮。这种实现方式存在一些缺点，如尺寸难以控制。不同浏览器间的表现也存在差异，如FireFox和IE10+。

为了解决这个问题，我们将学习一个新技能：通过HTML和CSS模拟清除按钮的动态呈现。这样，无论在哪种浏览器下，我们都可以实现相似的用户体验。

让我们看看如何使用CSS来实现这个功能：

```css

put {

padding: 5px;

margin: 0;

border: 1px solid beceeb;

}

.clear {

display: none;

position: absolute;

width: 16px;

height: 16px;

margin: 6px 0 0 -20px;

background: url(clear.png);

}

put::-ms-clear {

display: none;

}

put:valid + .clear {

display: inline;

}

```

接下来是HTML部分：

```html

```

通过这样的设置，当输入框有内容时，清除按钮就会显示出来。这种效果类似于某些网站在FireFox浏览器下的SEO优化截图。

实现原理：

HTML部分：由于不同浏览器对search类型文本框的尺寸控制存在差异，因此使用缺省的类型（即text类型）。required属性配合CSS伪类实现我们的效果。

CSS部分：使用:valid伪类。这是CSS3中新增的伪类，现代浏览器（如IE10+）都支持。该伪类表示表单是合法的。当文本框有内容时，它被认为是合法的，从而触发:valid伪类选择器，使清除按钮显示出来。

这个方法也存在一些不足。例如，在某些浏览器（如IE11）下，可能存在渲染问题。点击叉叉并不会清除输入框的内容，只是控制清除按钮的显隐。

实现的优点：相比传统的JavaScript实现方式，这个方法更为简单高效。它充分利用了浏览器的自身事件特性，无需额外的JavaScript事件监听。

实现的不足：兼容性是一个问题。对于IE9及以下版本的浏览器，可能无法完全支持这个功能。

这个新技能可以在原型设计、demo展示或移动端开发中使用。尽管存在一些问题，但它的灵活性和简单性使其成为一个有价值的技术。