Question

如何更改html5表格中的工具提示文字和样式？ example

<form action='mail.php'>
Enter email: <input name='email' type='email' value='not email' />
<input type='submit' value='send' />
</form>

Answer 1

据我所知，你不能使用HTML5或CSS来直接改变外观和外观。感觉元素的工具提示。

这是因为工具提示是HTML5规范的一部分，每个浏览器都以自己的方式呈现，因此没有具体说明如何更改它的样式。

但是，您可以使用与元素关联的隐藏div创建自己的工具提示。

然后在鼠标上显示然后给他们你想要的样式。

即使你对JS和CSS足够好，你也可以使用淡入淡出效果，并且在鼠标输入事件后短暂延迟。

Answer 2

试试这段代码

DEMO

<form action='mail.php'>
Enter email: <input name='email' type='email' placeholder='not email' />
<input type='submit' value='send' class="btn"/>
</form>


input {
  border:none;
  outline:none;
  border: 2px solid #ececec;
  width: 250px;
  height: 40px;
  padding: 5px 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  background: #fafafa;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.btn {
  border:none;
  outline:none;
  font-size: 14px;
  line-height:30px;
  width: 110px;
  color: #fff;
  background: green;
  -webkit-border-radius: 10px;;
  -moz-border-radius: 10px;;
  border-radius: 10px;
  cursor:pointer;
}
.btn:hover {
  position: relative;
  top:2px;
}
::-webkit-input-placeholder {color:#c0392b; font-size:14px;}
::-moz-placeholder          {color:#c0392b; font-size:14px;}/* Firefox 19+ */
:-moz-placeholder           {color:#c0392b; font-size:14px;}/* Firefox 18- */
:-ms-input-placeholder      {color:#c0392b; font-size:14px;}
:focus::-webkit-input-placeholder {color: transparent}
:focus::-moz-placeholder          {color: transparent}
:focus:-moz-placeholder           {color: transparent}
:focus:-ms-input-placeholder      {color: transparent}

Answer 3

正确，您无法更改标准工具提示的样式，但您可以在表单元素属性data-custom-validation上使用此polifill（https://github.com/dsheiko/HTML5-Form-Shim）。这将使浏览器通过其HTML5标记按预期处理您的表单，但在提交时使用自定义工具提示。你可以在这里找到细节： http://dsheiko.com/weblog/making-use-of-html5-form

如何更改html5表单中的工具提示文本和样式？

3 个答案: