[英]Change css style HTML5 form required attribute required message
i work with RTLbootstrap
for RTL
project. 我为
RTL
项目使用RTLbootstrap
。 now i have any form with HTML5 form required attribute required message . 现在我有任何带有HTML5表单required属性required消息的表单 。 in action i have this ballon for input:
在行动中,我有这个气球供输入:
I need To change Like This For RTL: 我需要像这样更改RTL:
HTML: HTML:
<div class="controls">
<input class="span4" type="text" name="title" placeholder="Title" value="" required oninvalid="this.setCustomValidity(\'User ID is a must\')">
</div>
NOTE:This is not custom tooltip or ballon! 注意:这不是自定义工具提示或气球! if we add required html tag in form input.
如果我们在表单输入中添加所需的html标签。 before submit form
HTML5 form required attribute
show this ballon message automaticly. 在提交表单之前,
HTML5 form required attribute
会自动显示此气球消息。 I need To edit/change/Set CSS For validation message? 我需要编辑/更改/设置CSS以获得验证消息吗?
How To change Display Of required field message for show in right
of input
field? 如何更改显示在
input
字段right
的必填字段消息的显示?
Chrome does not allow styling form validation bubbles anymore: Chrome不再允许样式验证表单气泡:
Firefox has no way to style the error bubbles Firefox无法设置错误气泡的样式
hey i found a link here and they have used this trick.They have appended a class to the input type. 嘿,我在这里找到一个链接,他们使用了这个技巧。他们在输入类型后附加了一个类。 and displayed message there .Hope that helps after little customization.
并在其中显示消息。希望在少量自定义后有所帮助。 working codepen: http://codepen.io/smarty_tech/pen/ONZRVp
有效的Codepen: http ://codepen.io/smarty_tech/pen/ONZRVp
<form id="frm" action="action">
<div>
<label>Email</label>
<input type="email" required="required"/><span class="theTooltip">Invalid email</span>
</div>
<div>
<button formnovalidate="formnovalidate">OK</button>
</div>
document.querySelector('#frm').addEventListener('submit', e => {
e.preventDefault();
e.currentTarget.classList.add('submitted');
});
body
font-family: Helvetica, sans-serif
display: flex
flex-direction: column
align-items: center
justify-content: center
overflow: hidden
width: 100%
height: 100vh
background orange
form > div
position: relative
margin-bottom: 10px
.theTooltip
$bgcolor = rgba(black, 0.7)
$arrow = 10
$radius = 5
$maxWidth = 250
$padding = 15
backface-visibility: hidden
will-change: opacity, visibility
max-width: $maxWidth * 1px
border-radius: $radius * 1px
background-color: $bgcolor
padding: $padding * 1px
color: white
box-sizing: border-box
display: inline-block
position: absolute
transform-style: preserve-3d
transform: translate(15%, -50%)
top: 50%;
left: auto
right: auto
bottom: auto
visibility: hidden
margin: 0
opacity: 0
transition: opacity 0.3s ease-out
z-index: 100
&:after
content: ''
position: absolute
width: 0
height: 0
top: 50%
margin-top: $arrow * -1px
left: $arrow * -1px
border-top: $arrow * 1px solid transparent
border-bottom: $arrow * 1px solid transparent
border-right: $arrow * 1px solid $bgcolor
label
display: inline-block
vertical-align: center
input
background: white
border: 1px solid transparent
cursor: pointer
display: inline-block
overflow: visible
margin: 0
outline: 0
vertical-align: center
text-decoration: none
width: auto
border-radius: 3px
cursor: text
padding: 7px
&:focus
&:active
outline: none
.submitted
input
&:invalid
border: 1px solid red
~ .theTooltip
visibility: visible
opacity: 1
&:valid
~ .theTooltip
transition: opacity 0.3s, visibility 0s 0.3s
Example of Message with only css3 仅css3的消息示例
Code : 代码:
.tooltip, .arrow:after {
background: black;
border: 2px solid white;
}
.tooltip {
pointer-events: none;
opacity: 0;
display: inline-block;
position: absolute;
padding: 10px 20px;
color: white;
border-radius: 20px;
margin-top: 20px;
text-align: center;
font: bold 14px "Helvetica Neue", Sans-Serif;
font-stretch: condensed;
text-decoration: none;
text-transform: uppercase;
box-shadow: 0 0 7px black;
}
.arrow {
width: 70px;
height: 16px;
overflow: hidden;
position: absolute;
left: 50%;
margin-left: -35px;
bottom: -16px;
}
.arrow:after {
content: "";
position: absolute;
left: 20px;
top: -20px;
width: 25px;
height: 25px;
-webkit-box-shadow: 6px 5px 9px -9px black,5px 6px 9px -9px black;
-moz-box-shadow: 6px 5px 9px -9px black,5px 6px 9px -9px black;
box-shadow: 6px 5px 9px -9px black,5px 6px 9px -9px black;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
.tooltip.active {
opacity: 1;
margin-top: 5px;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
}
.tooltip.out {
opacity: 0;
margin-top: -20px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.