焦点对准时，在文本区域中禁用突出显示的下划线

Question

我在react应用程序中有一个textarea，当前当您单击它时，底部的高光区比其余的高，看起来像下面的图片。如何禁用此功能并使整个框正常且均匀地突出显示？

Answer 1

当控件具有焦点时，可以使用CSS和:focus选择器来设置样式。下面的CSS将在具有焦点的textarea控件周围添加一个2像素宽的边框。

textarea:focus {
    border: 2px solid blue;
}

Answer 2

根据需要按如下所示设置边框属性

textarea {
border: 1px solid #eee;
}

<textarea cols="50"></textarea>

Answer 3

def view(request):
    user = User.objects.all().select_related(
    ).prefetch_related(
        'groups',
    ).get(pk=request.user.pk)
    return render(request, 'app/template.html', {
        'user': user,
    })

    .form-group.form-md-line-input .form-control.edited:not([readonly]) ~ label:after, .form-group.form-md-line-input .form-control.edited:not([readonly]) ~ .form-control-focus:after, .form-group.form-md-line-input .form-control:focus:not([readonly]) ~ label:after, .form-group.form-md-line-input .form-control:focus:not([readonly]) ~ .form-control-focus:after, .form-group.form-md-line-input .form-control.focus:not([readonly]) ~ label:after, .form-group.form-md-line-input .form-control.focus:not([readonly]) ~ .form-control-focus:after {
   background: none !important;
}