Фоновые рамки элементов в формах видны и раздражают

Question

Пытаюсь создать формы для моего сайта. При тестировании в опере выглядит нормально.

Но когда отмечен в браузерах Chrome или Mozilla, я вижу, что я вижу фоновые серые рамки для каждого элемента в форме. При наведении или фокусе я вижу серый цвет, заполняющий коробку. Я могу понять, что это должно отличать другие элементы, когда они сфокусированы.

Я захватил результаты, вы поймете, когда увидите это.

Я подумал, что это контур, и попытался удалить его ни с чем, но он не работает.

<div class="emply-resume-list row mb-1" id="head1" style="display:block;">
<div class="col-md-12 emply-info">
    <div class="emply-resume-info-sams">
        <form role="form" action="/resumehead" method="post">
            <h4>Resume Headline</h4>
            <label>Resume Headline is the first point of contact with Recruiters</label>
            <textarea id="ta1" class="form-control" name="headline" style="height:120px; width:100%; resize:none;" onkeyup="countChars(this,'lab1',250);"></textarea>
            <label id="lab1" style="float:left">250 Character(s) Left</label>
            <button type="submit" class="btn btn-primary"  style="float:right;">Save</button>
            <div class="clearfix"> </div>
        </form>
    </div>
</div>

Изображение Chrome:
Опера Изображение:

Answer 1

Вы не закрыли свой первый div в финале. Пожалуйста, сделайте это и проверьте еще раз.

Answer 2

Попробуйте добавить

#ta1{
    border: none;
    overflow: auto;
    outline: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    resize: none;
    background:none;
}

к вашему css