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

时间:2014-07-30 09:40:14

标签: html css html5

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

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

3 个答案:

答案 0 :(得分:0)

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

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

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

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

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

答案 1 :(得分:0)

试试这段代码

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}

答案 2 :(得分:0)

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