[英]Change css style HTML5 form required attribute required message
我為RTL
項目使用RTLbootstrap
。 現在我有任何帶有HTML5表單required屬性required消息的表單 。 在行動中,我有這個氣球供輸入:
我需要像這樣更改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以獲得驗證消息嗎?
如何更改顯示在input
字段right
的必填字段消息的顯示?
嘿,我在這里找到一個鏈接,他們使用了這個技巧。他們在輸入類型后附加了一個類。 並在其中顯示消息。希望在少量自定義后有所幫助。 有效的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
代碼:
.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.