:focus 不改变其他元素的数据

Question

我想让只读输入在另一个输入处于焦点时可见。我尝试了 css，没有发现任何问题，但仍然无法正常工作。基本上，当 Username 被聚焦时，UsernameLabel display:block。我设法做到了，但是通过删除用户名已经存在的焦点。

详情：

只读输入
输入
如果input:focus只读输入。display:block

#Container {
            height: 75vh;
            width: 100%;
            background-color: rgb(42, 95, 165);
        }

        .UsernameLabel {
            font-size: 30px;
            color: rgb(255, 255, 255);
            height: 30px;
            width: 75%;
            border-radius: 5px;
            text-align: center;
            background-color: rgb(42, 95, 165);
            position: fixed;
            top: 7.5%;
            left: 50%;
            transform: translate(-50%, -50%);
            transition: 0.3s;
            display: none;
        }

        .Username {
            height: 7.5vh;
            width: 75%;
            border-radius: 5vh;
            border: none;
            background-color: #313131;
            position: fixed;
            top: 15%;
            left: 50%;
            transform: translate(-50%, -50%);
            transition: 0.3s;
            color: white;
            text-align: center;
            font-size: 20px;
        }

        .Username:focus{
            width: 90%;
            margin-top: 30px;
        }
        
        .Username:focus .UsernameLabel{
            display: block;
        }

        #Container2 {
            height: 35vh;
            width: 35vh;
            background-color: #1a1a1a;
            border-radius: 20px;
            position: fixed;
            top: 35%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
        }

        body {
            margin: 0;
        }

        #InverseRadius {
            height: 10vh;
            width: 100%;
            background-color: #1a1a1a;
            border-radius: 50%;
            margin-top: -5vh;
        }

<body bgcolor="#1a1a1a">
    <div id="Container">
        <div id="Container2">
            <input class="UsernameLabel" value="Username" readonly>
            <input type="text" placeholder="Username" class="Username" id="Username">
        </div>
    </div>
    <div id="InverseRadius"></div>
</body>

Answer 1

试试这个：

#Container {
            height: 75vh;
            width: 100%;
            background-color: rgb(42, 95, 165);
        }

        .UsernameLabel {
            font-size: 30px;
            color: rgb(255, 255, 255);
            height: 30px;
            width: 75%;
            border-radius: 5px;
            text-align: center;
            background-color: rgb(42, 95, 165);
            position: fixed;
            top: 7.5%;
            left: 50%;
            transform: translate(-50%, -50%);
            transition: 0.3s;
            display: none;
        }

        .Username {
            height: 7.5vh;
            width: 75%;
            border-radius: 5vh;
            border: none;
            background-color: #313131;
            position: fixed;
            top: 15%;
            left: 50%;
            transform: translate(-50%, -50%);
            transition: 0.3s;
            color: white;
            text-align: center;
            font-size: 20px;
        }

        .Username:focus{
            width: 90%;
            margin-top: 30px;
        }
        
        .Username:focus~.UsernameLabel{
            display: block;
        }

        #Container2 {
            height: 35vh;
            width: 35vh;
            background-color: #1a1a1a;
            border-radius: 20px;
            position: fixed;
            top: 35%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
        }

        body {
            margin: 0;
        }

        #InverseRadius {
            height: 10vh;
            width: 100%;
            background-color: #1a1a1a;
            border-radius: 50%;
            margin-top: -5vh;
        }

<body bgcolor="#1a1a1a">
    <div id="Container">
        <div id="Container2">
            <input type="text" placeholder="Username" class="Username" id="Username">
            <input class="UsernameLabel" value="Username" readonly>
            
        </div>
    </div>
    <div id="InverseRadius"></div>
</body>

解释：
SPACE 选择器仅在最后一个是第一个的后代时出现。
但在你的情况下，他不是后代，你可以使用 ~ 或 + 选择器（并反转它们在 html 中的顺序）
more here

:focus 不改变其他元素的数据

:focus not changing the other element's data

javascript

html

css

focus