Change border on input focus

Question

I have a code:

input:focus ~ .field {
    border-bottom-color: red;
}

.form-control {

width: 100%; 
outline: none;

}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.1.4/tailwind.min.css">

<div class="form-field mb-4">
                                            <label for="" class="text-xs pl-1 text-gray-ccc">Ваше имя</label>
                                            <div class="field has-icon-field flex items-center border-b tw-border-gray-500">
                                                <input type="text" placeholder="Name user" class="form-control">
                                                <div class="w-4 h-4">
                                                    <svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                            <path d="M12.8033 9.69668C11.9864 8.87982 11.0141 8.27511 9.95329 7.90904C11.0895 7.12649 11.8359 5.81684 11.8359 4.33594C11.8359 1.94511 9.89083 0 7.5 0C5.10917 0 3.16406 1.94511 3.16406 4.33594C3.16406 5.81684 3.91052 7.12649 5.04674 7.90904C3.9859 8.27511 3.01359 8.87982 2.19671 9.69668C0.780147 11.1133 0 12.9967 0 15H1.17188C1.17188 11.5107 4.01065 8.67188 7.5 8.67188C10.9893 8.67188 13.8281 11.5107 13.8281 15H15C15 12.9967 14.2199 11.1133 12.8033 9.69668ZM7.5 7.5C5.75534 7.5 4.33594 6.08063 4.33594 4.33594C4.33594 2.59125 5.75534 1.17188 7.5 1.17188C9.24466 1.17188 10.6641 2.59125 10.6641 4.33594C10.6641 6.08063 9.24466 7.5 7.5 7.5Z" fill="#CCCCCC"/>
                                                    </svg>
                                                </div>
                                            </div>
                                        </div>

How I can change border on input focus in parent element? Please help me resolve this issue. I use input with custom icon, and they have same border. I need change border on input focus.

Change parent property when child element is focused can be achieved using JS, you need to edit the question. — Vipul Dessai, Dec 25 '19 at 17:24
can you tell me which element border should be changed on whose focus? — Vipul Dessai, Dec 25 '19 at 17:28
you will have to use a hack as provided in the answers below to get that working. — Vipul Dessai, Dec 25 '19 at 17:34
from the duplicate: https://stackoverflow.com/a/46406959/8620333 — Temani Afif, Dec 25 '19 at 18:18

score 0 · Answer 1 · answered Dec 25 '19 at 17:20

With your current structure you can't. You are trying to select the parent element of the selected input. This is currently not possible with CSS only. There are ways with JavaScript.

Refer to this question for more info Is there a CSS parent selector? for more info.

You could add a new div after the input tag and give it the border then your CSS will work for it

HTML
<input>
<div class="hasBorder"></div>

CSS
.input:focus ~ .hasBorder{
   border-color: red;
}

TwistedOwl · Answer 2 · 2019-12-26T12:56:51.307

0

What are you trying to do is not possible with CSS only. You cannot select parent element. Either you need to change your code structure or use javascript.

EDIT: As it turns out there is :focus-within option: Is there a CSS parent selector?

edited Dec 26 '19 at 12:56

answered Dec 25 '19 at 17:22

TwistedOwl

1,195
1
17
30

Change border on input focus

2 Answers2