Текстовое поле ввода 29/29

Курсы §27. Плавные переходы
1

При попытке запустить файл в Opera 53.0.2907.68 при выделении поля оно окаймляется голубой раикой, никто не может подсказать почему, и как с этим боротся
код после сокращений такой:
HTML

Текстовое поле ввода, шаг 4


Слово по-английски

CSS
input {
width: 270px;
padding: 5px;
font-size: 18px;
border: none;
border-bottom: 1px solid #757575;
box-sizing: border-box;
}

/* уезжающая наверх надпись */
input:focus~.label-box label,
input:valid~.label-box label {
font-size: 14px;
transform: translateY(-20px);
}

.label-box {
position: relative;
width: 270px;
}

label {
position: absolute;
top: -36px;
font-size: 18px;
color: #757575;
transition: 0.2s ease all;
pointer-events: none;
}

/* появляющееся подчеркивание */
.label-box::before,
.label-box::after {
content: “”;
position: absolute;
height: 2px;
width: 0;
bottom: 1px;
background-color: #757575;
transition: width 0.2s;
}

.label-box::before {
left: 50%;
}

.label-box::after {
right: 50%;
}

input:focus~.label-box::before,
input:focus~.label-box::after {
width: 50%;
}

Заранее благодарю

2

Это стандартное поведение поля при фокусе. Зачем с этим потребовалось бороться?

3

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

4 
input:focus {
    outline: none;
}
1 лайк
5

Ааа, так это outline! а то я также border: none в :focus прописывать пытался. Спасибо большое!