Question

我有一个代码：

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>

如何更改父元素中输入焦点的边框？请帮助我解决此问题。我使用带有自定义图标的输入，它们具有相同的边框。我需要在输入焦点上更改边框。

Answer 1

使用您当前的结构，您做不到。您正在尝试选择所选输入的父元素。目前，仅CSS无法实现此功能。 JavaScript有多种方法。

有关更多信息，请参见此问题，Is there a CSS parent selector?有关更多信息。

您可以在输入标签后添加一个新的div并为其添加边框，然后CSS便会对其起作用

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

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

Answer 2

仅CSS无法实现您想做的事情。您无法选择父元素。您需要更改代码结构或使用javascript。

编辑：事实证明，有df.groupby('date')选项： Is there a CSS parent selector?

更改输入焦点上的边框

2 个答案: