Despite setting autocomplete to off in my form, modern browsers tend to override this. An issue arises where the border of a user's input field remains intact when they manually type their name, but is removed when the browser autofills it.
https://i.sstatic.net/gOF2m.png
.half {
width: 50%;
margin-left: auto;
margin-right: auto;
}
input[type=name] {
width: 100%;
padding: 15px;
display: inline-block;
margin-bottom: 10px;
outline: none;
border-radius: 30px;
box-sizing: border-box;
border: solid 5px transparent;
background-image: linear-gradient(white, white), radial-gradient(circle at top right, #006699, #9900CC);
background-origin: border-box;
background-clip: padding-box, border-box;
font-family: 'Roboto', sans-serif;
font-size: 15px;
box-sizing: border-box;
}
.contain {
width: 100%;
min-width: 100%;
max-width: 100%;
min-height: 200px;
max-height: 200px;
margin-bottom: 10px;
background-image: linear-gradient(white, white), radial-gradient(circle at top right, #006699, #9900CC);
background-origin: border-box;
background-clip: padding-box, border-box;
border: solid 5px transparent;
border-radius: 30px;
padding: 0;
overflow: hidden;
box-sizing: border-box;
}
textarea {
width: 100%;
min-width: 100%;
max-width: 100%;
min-height: 200px;
max-height: 200px;
padding: 15px;
resize: none;
display: inline-block;
outline: none;
border: none;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
font-size: 15px;
border-radius: 30px;
box-sizing: border-box;
}<div class="half">
<form method="post" name="submitted" action="submitted" autocomplete="off">
<input type="name" id="forename" name="forename" placeholder="Forename"><br>
<div class="contain">
<textarea></textarea>
</div>
<br>
<input type="submit" name="submit" id="submit" value="Contact Me" required="">
</form>
</div>Is there a way to keep the border even when the field is autocompleted, considering that complete disabling of autocomplete is not feasible?