我与RTLbootstrap
项目合作RTL
。现在我有任何形式的 HTML5表单必需属性必需消息。在行动中我有这个气球输入:
我需要改变这样的RTL:
HTML:
<div class="controls">
<input class="span4" type="text" name="title" placeholder="Title" value="" required oninvalid="this.setCustomValidity(\'User ID is a must\')">
</div>
注意:这不是自定义工具提示或气球!如果我们在表单输入中添加所需的html标记。在提交表单HTML5 form required attribute
之前自动显示此气球消息。我需要编辑/更改/设置CSS验证消息吗?
如何在right
字段的input
中更改显示所需的字段消息?
答案 0 :(得分:2)
答案 1 :(得分:0)
<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
答案 2 :(得分:-2)
Example of Message with only css3
代码:
.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;
}