如何更改html5表格中的工具提示文字和样式? example
<form action='mail.php'>
Enter email: <input name='email' type='email' value='not email' />
<input type='submit' value='send' />
</form>
答案 0 :(得分:0)
据我所知,你不能使用HTML5或CSS来直接改变外观和外观。感觉元素的工具提示。
这是因为工具提示是HTML5规范的一部分,每个浏览器都以自己的方式呈现,因此没有具体说明如何更改它的样式。
但是,您可以使用与元素关联的隐藏div创建自己的工具提示。
然后在鼠标上显示然后给他们你想要的样式。
即使你对JS和CSS足够好,你也可以使用淡入淡出效果,并且在鼠标输入事件后短暂延迟。
答案 1 :(得分:0)
试试这段代码
<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