Is there a way to override default CSS of HTML5 form validation messages

Question

I want to change background of bubble message - to be red and text to be in another language , not english. I've set "required" to my input fields and CSS for valid and invalid and it's working. And how to make this bubble message to appear when you hover input field.I tried with:

 ::-webkit-validation-bubble-message {
     border: 1px solid #E6C700;
     background: #FF0000;

    }

But it doesn't change. How to change background of bubble messages? My CSS for valid and invalid is:

input:focus:invalid, select:focus:invalid { 
    background: #fff url("images/required.png") no-repeat 98% center;
    box-shadow: 0 0 5px #d45252;
    border-color: #b03535
}
 input:required:valid, select:required:valid { 
    background: #fff url("images/valid.png") no-repeat 98% center;
    box-shadow: 0 0 5px #5cd053;
    border-color: #28921f;
}

Answer 1

 ::-webkit-validation-bubble-message 

Will only partially work on chrome and safari.

ultimately you can not style these at the moment the are browser/OS specific.

You can change the messages with JS but that's as much as you can get away with at the moment.