个人中心
gpt4 book ai didi

html - css点击后如何让标签上去？

转载 作者：行者123 更新时间：2023-11-28 19:20:54 25 4
gpt4 key购买 nike

我想制作一个表格，当点击时标签会上升 15px，你可以写文本，但我不知道如何用我当前的代码来做。我认为问题在于我如何选择标签和输入。

我试过这些方法:

.form-row-field-input:focus ~ label, 
.form-row-field-input:valid ~ label {
top: -12px;
left: 0;
font-size: 12px;
color: #003333;
font-weight: bold;}

input[type=text]:focus~label {
display:block;
color: black;
top: -20px;
font-size: 14px;}
<div class="form-inputs">
<form action="" method="POST">
<div class="form-row">
      <span class="form-row-number">01</span>
      <label for="POST-name" class="form-row-field">First name</label>
      <input type="text" class="form-row-field-input">
</div>
<div class="form-row">
      <span class="form-row-number">02</span>
      <label for="POST-lastname" class="form-row-field">Last name</label>
      <input type="text" class="form-row-field-input">
 </div>
 <div class="form-row">
        <span class="form-row-number">03</span>
        <label for="POST-email" class="form-row-field">Email</label>
        <input type="text" class="form-row-field-input">
   </div>
       <input class="form-btn" type="submit" value="Get it">
  </form>
  </div><!--end-->

/** CSS **/

.form-inputs {
padding: 40px;
flex: 60%;
display: flex;
flex-direction: column;
align-content: center;
justify-content: center;
position: relative;
 }
.form-btn {
margin: 20px 0px;
background-color: #f6fe00;
color: black;
padding: 10px 40px;
font-weight: 700;
border: none;
cursor: pointer;
 }
.form-row {
border-bottom: 1px solid grey;
padding: 10px 0px;
position: relative;
}
.form-row-number {
color: #8f63ff;
padding-right: 10px;
}
.form-row-field {
color: #9b91f5;
position: absolute;
pointer-events: none;
transition: 0.5s;
top: 10px;
margin-left: 1em;
}
.form-row-field-input {
background-color: inherit;
border: none;
display: block;
position: absolute;
top: 10px;
transition: 0.5s;
margin-left: 1.5em;
}

我希望当点击输入时，标签会随着过渡而上升

最佳答案

您使用的 CSS 中的通用同级选择器只能定位出现在 AFTER 之后的元素，因此由于标 checkout 现在 HTML 中的输入之前，它实际上并没有应用 CSS。

您只需在输入后移动标签元素即可获得预期效果。 Google 的 Material UI 也采用这种方法，以使其主要使用 CSS 来实现预期的视觉效果。

这是将标签元素移至输入后并稍微调整 CSS:

<body>
    <div class="form-inputs">
        <form action="" method="POST">
            <div class="form-row">
                <span class="form-row-number">01</span>

                <input type="text" class="form-row-field-input">
                <label for="POST-name" class="form-row-field">First name</label>
            </div>
            <div class="form-row">
                <span class="form-row-number">02</span>

                <input type="text" class="form-row-field-input">
                <label for="POST-lastname" class="form-row-field">Last name</label>
            </div>
            <div class="form-row">
                <span class="form-row-number">03</span>

                <input type="text" class="form-row-field-input">
                <label for="POST-email" class="form-row-field">Email</label>
            </div>
            <input class="form-btn" type="submit" value="Get it">
        </form>
    </div>
    <!--end-->
</body>
  .form-inputs {
            padding: 40px;
            flex: 60%;
            display: flex;
            flex-direction: column;
            align-content: center;
            justify-content: center;
            position: relative;
        }

        .form-btn {
            margin: 20px 0px;
            background-color: #f6fe00;
            color: black;
            padding: 10px 40px;
            font-weight: 700;
            border: none;
            cursor: pointer;
        }

        .form-row {
            border-bottom: 1px solid grey;
            padding: 10px 0px;
            position: relative;
        }

        .form-row-number {
            color: #8f63ff;
            padding-right: 10px;
        }

        .form-row-field {
            color: #9b91f5;
            position: absolute;
            pointer-events: none;
            transition: 0.5s;
            top: 10px;
            margin-left: 1em;
        }

        .form-row-field-input {
            background-color: inherit;
            border: none;
            display: block;
            position: absolute;
            top: 10px;
            transition: 0.5s;
            margin-left: 1.5em;
        }

        .form-row-field-input:focus~label {
            top: -5px;
            font-size: 12px;
            color: #003333;
            font-weight: bold;
        }

https://jsfiddle.net/7urgeL60/

关于html - css点击后如何让标签上去？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57330088/

25 4 0
文章推荐： javascript - 如何防止我的内容区域移动
文章推荐： python - 如何在 Tornado ( Python ) 服务器中测试 Max Open Websocket Limit
文章推荐： python - Pandas 0.14.1 StataReader - 阅读 .dta 文件
文章推荐： Javascript 匿名回调函数