html required css,jquery - Change css style HTML5 form required attribute required message - Stack O...

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

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