Изменение свойств елемента страницы после клика

Question

Моя проблема: после нажатия на элементы документа(кнопки, текстареа) вокруг них появляется белая рамка. Она ищезает после того как нажать по другой части елемента. Как избавиться от этого еффекта?

.blockButton{
    color:white; height: 5.5%;
    box-shadow:none;
    background-color:black;
    width: 100%;
    border: 0px;
    border-radius: 0;
    font-family: 'Helvetica', 'Arial', sans-serif;
    font-size: 1.4em;
    margin: 0;
    padding: 0;
}

.divBlock{
    flex-direction: column;
    background-color: black;
    height: 100vh;
    margin: 0;
    padding: 0;
}

textarea{
    background-color: #525252;
    width:100%;
    resize: none;
    color:white;
    font-family: 'Helvetica', 'Arial', sans-serif;
    font-size: 1.6em;
    border: none;
}
textarea:active{
    background-color: #525252;
    width:100%;
    resize: none;
    color:white;
    font-family: 'Helvetica', 'Arial', sans-serif;
    font-size: 1.6em;
    outline-width: 0;
}

<!DOCTYPE html>
<html>
<head>
    <title>
        
    </title>

</head>

<body style="padding: 0;margin: 0;">

<nav style = "margin: 0;padding: 0; display:flex; width: 100%; height: 100%;">

    <div class="divBlock" style="width:15%; background-color:black;">

        <button onclick  = "alert(1);" style="color:white; height: 5%;box-shadow:none;background-color:black; width: 100%;border-bottom: 1px solid white;margin: 0;padding: 0;">
            Create new Note
        </button>
        <button onclick  = "alert();" style="color:white; height: 5%;box-shadow:none;background-color:black; width: 100%;border-bottom: 1px solid white;margin: 0;padding: 0;">
            Create new Note
        </button>
    </div>
    
    <div class = "divBlock" style="width: 85%;flex-direction: column;background-color:yellow;height: 100vh;">
        <textarea style="background-color: #525252;width:100%;resize: none;color:white;"></textarea>
    </div>
</nav>
</body>
</html>

Answer 1

Это эффект от свойства, которое задает браузер:

:focus {
    outline: -webkit-focus-ring-color auto 1px;
}

Избавиться от рамки можно, например через outline: 0 !important; у базового селектора, либо так:

textarea:focus {
  outline: 0;
}

Можно аналогично использовать outline: none;. Разницы, в данном случае, — нет.

.blockButton{
    color:white; height: 5.5%;
    box-shadow:none;
    background-color:black;
    width: 100%;
    border: 0px;
    border-radius: 0;
    font-family: 'Helvetica', 'Arial', sans-serif;
    font-size: 1.4em;
    margin: 0;
    padding: 0;
}

.divBlock{
    flex-direction: column;
    background-color: black;
    height: 100vh;
    margin: 0;
    padding: 0;
}

textarea{
    background-color: #525252;
    width:100%;
    resize: none;
    color:white;
    font-family: 'Helvetica', 'Arial', sans-serif;
    font-size: 1.6em;
    border: none;
    outline: 0 !important;
}
textarea:active{
    background-color: #525252;
    width:100%;
    resize: none;
    color:white;
    font-family: 'Helvetica', 'Arial', sans-serif;
    font-size: 1.6em;
    outline-width: 0;
}

<!DOCTYPE html>
<html>
<head>
    <title>
        
    </title>

</head>

<body style="padding: 0;margin: 0;">

<nav style = "margin: 0;padding: 0; display:flex; width: 100%; height: 100%;">

    <div class="divBlock" style="width:15%; background-color:black;">

        <button onclick  = "alert(1);" style="color:white; height: 5%;box-shadow:none;background-color:black; width: 100%;border-bottom: 1px solid white;margin: 0;padding: 0;">
            Create new Note
        </button>
        <button onclick  = "alert();" style="color:white; height: 5%;box-shadow:none;background-color:black; width: 100%;border-bottom: 1px solid white;margin: 0;padding: 0;">
            Create new Note
        </button>
    </div>
    
    <div class = "divBlock" style="width: 85%;flex-direction: column;background-color:yellow;height: 100vh;">
        <textarea style="background-color: #525252;width:100%;resize: none;color:white;"></textarea>
    </div>
</nav>
</body>
</html>

БЛОГ НА HUSL

Изменение свойств елемента страницы после клика

Ответы (1 шт):