HTML5 CSS style change required attribute

Question

I am working with RTLbootstrap for an RTL project. I now have some form with the HTML5 form of the required attribute of the required message . in action, I have this cylinder for input:

I need to change Like This For 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> 

NOTE. This is not a custom hint or balloon! if we add the required html tag to the form input. show this message automatically before submitting the HTML5 form required attribute . Do I need to edit / change / set CSS for check message?

How to change the display of the required field message for display in the right of input field?

Answer 1

Chrome no longer accepts form validation templates:

More details ...

Firefox has no way to erase error bubbles

More details ...

Answer 2

Hey, I found the link here, and they used this trick. They added a class to the input type. and a message is displayed there. Hope this helps after a little tweaking. working code: 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 

Answer 3

Example message only 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; }