избавиться от прямоугольника вокруг накидных коробок

Question

У меня есть текстовая область в моем html, и у этого есть закругленные края. но когда я нажимаю внутри текстовой области, он показывает прямоугольник вокруг закругленных краев.

Ниже мой HTML.

<textarea placeholder="Enter Text Here..." id="usermsg" class="Textareausermsg" onclick="TextAreaToggle()" style="margin: 0px 0px 0px -50px; width: 490px; height: 41px;"></textarea> 

и вот мой CSS

.Textareausermsg { 
    border-radius: 15px; 
    font-size: 15px; 
    text-align: left; 
    line-height: 34px; 
} 

работает скрипку https://jsfiddle.net/jrss9192/1/

Answer 1

Просто удалите набросков

.Textareausermsg { 
    border-radius: 15px; 
    font-size: 15px; 
    text-align: left; 
    line-height: 34px; 
    outline: 0; 
} 

Answer 2

Использование: outline: none, когда текстовое поле сосредоточено

textarea:focus{ 
    outline: none; 
} 

Answer 3

Прямоугольник, который вы видите, представляет собой схему браузера по умолчанию. Хотя не рекомендуется удалять стили браузера по умолчанию, это можно сделать, объявив контур: none;

.Textareausermsg { 
 
    border-radius: 15px; 
 
    font-size: 15px; 
 
    text-align: left; 
 
    line-height: 34px; 
 
    outline: none; 
 
}

<textarea placeholder="Enter Text Here..." id="usermsg" class="Textareausermsg" style="margin: 0px 0px 0px -50px; width: 490px; height: 41px;"></textarea>

Answer 4

Это контур textarea появляется на focus просто установить outline:0; на .Textareausermsg

.Textareausermsg { 
 
    border-radius: 15px; 
 
    font-size: 15px; 
 
    text-align: left; 
 
    line-height: 34px; 
 
    outline:0; 
 
}

<textarea placeholder="Enter Text Here..." id="usermsg" class="Textareausermsg" style="width: 260px; height: 41px;"></textarea>

Answer 5

rectangled область называется "план" и» s свойство css. Попробуйте добавить outline: none; в свой код css для его удаления.

Если вы хотите «синюю рамку» при нажатии кнопки/фокусировать элемент, попробуйте этот

.Textareausermsg { 
    border-radius: 15px; 
    font-size: 15px; 
    text-align: left; 
    line-height: 34px; 
    outline: none; 
} 

.Textareausermsg:focus, .Textareausermsg:active { 
    border:1px solid blue; 
} 

https://jsfiddle.net/jrss9192/2/

Answer 6

Вот решение Вашего вопроса.

.Textareausermsg { 
     border-radius: 15px; 
     font-size: 15px; 
     text-align: left; 
     line-height: 34px; 
     outline: none; 
    } 
    .Textareausermsg :active , .Textareausermsg :focus { outline:none}