按钮内文本输入- HTML

你不能使用javascript框架?如果可以的话，你可以使用jquery，例如，有很多插件可以做到这一点…

这里有一个教程:

http://viralpatel.net/blogs/2011/02/clearable-textbox-jquery.html

我个人不喜欢这个"组件行为改变"手册，因为如果你把你的应用移植到一个移动设备上，或者你在一个默认包含这个功能的浏览器中使用它，这会看起来很糟糕。

我为我正在做的一个项目创建了类似的东西。主要区别在于，出于可用性的考虑，图像在任何时候都是可见的。

分组输入和按钮:

对于你的问题的第一部分，我采取的方法是使用父容器来容纳文本框和按钮。这将允许你采用苹果的搜索方法。他们使用了css精灵(教程)而不是svg来制作图像。如果你碰巧使用的浏览器允许你"检查元素"，你可以去他们的网站看看他们是怎么做的。

基本上，我建议将背景图像放在包含元素上，这样文本框和按钮看起来就好像它们"在图像内部"。然后，一旦文本框获得焦点，你可以用CSS定位垂直移动背景图像，你就会得到你想要的外观。

隐藏/消失:

单独使用CSS隐藏和消失是不可能的。但是，您可以创建两个类，一个用于隐藏，另一个用于显示按钮。然后在javascript中，一旦文本框获得焦点，你可以将按钮的可见性设置为"可见"，在模糊时，你可以将其设置为"隐藏"。

JS推荐:

您应该考虑使用事件侦听器(教程)而不是HTML属性来检测您的点击或按压。这是一种更简洁、更优雅的方法。这就是为什么我会说使用jQuery这样的框架会让事情变得容易得多。它允许您设置事件侦听器，而不必担心遗留浏览器和各种标准实现。

一些代码会有帮助。我也很清楚。你想让你的文本区有一个背景图像?