更改css样式HTML5表单所需的属性必需消息

我使用RTLbootstrap进行RTL项目。 现在我有任何forms与HTML5表单必需属性必需的消息 。 在行动中我有这个气球输入：

我需要改变这样的RTL：

HTML：

注意：这不是自定义工具提示或气球！ 如果我们在表单输入中添加所需的html标记。 在提交表单之前， HTML5 form required attribute自动显示此气球消息。 我需要编辑/更改/设置CSSvalidation消息？

如何在input字段right更改显示所需的字段消息？

Answer 1

Chrome不再允许样式表格validation气泡：

查看详细信息

Firefox无法设置错误气泡的样式

查看详细信息

Answer 2

嘿，我在这里找到了一个链接，他们使用了这个技巧。他们在输入类型中添加了一个类。 并在那里显示消息。希望在少量定制后有所帮助。 工作代码： http ：//codepen.io/smarty_tech/pen/ONZRVp

 
 
 Email Invalid email 
 
 OK  

  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 

Answer 3

仅包含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; }