我在设置第一个和最后一个输入 block 的边框时遇到了问题。
编辑:我在这上面使用了 React。
我试过:
.float-input-block:first-child {
border-radius: 0.8rem;
}
但什么也没发生。
这是我的 HTML:
<div className="float-input-block">
<input className="float-input" type="text" id={name} {...rest} />
<label className="float-label" htmlFor={name}>{label}</label>
</div>
这是我的 CSS:
.float-input-block {
position: relative;
width: 31.1rem;
height: 7.2rem;
}
.float-input-block label {
font-size: 1.4rem;
}
.float-input {
width: 100%;
height: 100%;
/* border-radius: 0.8rem; Here it works, but applies to all the inputs */
background: var(--color-input-background);
border: 1px solid var(--color-line-in-white);
outline: 0;
padding: 0 1.6rem;
}
.float-input-block:first-child {
border-radius: 0.8rem;
}
.float-input-block:focus-within::after {
position: absolute;
width: 0.2rem;
height: 4.8rem;
left: 0;
top: 1.2rem;
content: '';
background: var(--color-primary-light);
}
.float-label {
display: block;
font-size: 1.4rem;
line-height: 2.4rem;
color: var(--color-text-complement);
opacity: 1;
transform: translate(1.8rem, -4.8rem);
transform-origin: 0 0;
transition: all 0.3s;
}
.float-input::placeholder {
color: transparent;
}
.float-input:focus + .float-label,
.float-input:not(:placeholder-shown) + .float-label {
transform: translate(1.7rem, -6.2rem) scale(0.71);
}
.eyeIcon, .eyeOffIcon {
transform: translate(27.4rem, -4.8rem);
}
.eyeOffIcon {
color: var(--color-primary);
}
@media(min-width: 1100px) {
.float-input-block {
width: 35.2rem;
height: 6.4rem;
}
.float-label {
transform: translate(1.8rem, -4.4rem);
font-size: 1.6rem;
}
.eyeIcon, .eyeOffIcon {
transform: translate(30.7rem, -4.4rem);
}
}
它应该是什么样子:
最佳答案
虽然在大多数情况下我会使用@jinongun 的回答,但这里是修复代码的解决方案。
您应该将 className
更改为 class
并将 htmlFor
更改为 for
。 className
和 htmlFor
是 JavaScript 属性。
.float-input-block :first-child {
border-radius: 0.8rem 0.8rem 0 0;
}
.float-input-block :last-child {
border-radius: 0 0 0.8rem 0.8rem;
}
.float-input-block input {
display: block;
height: 50px;
border: 1px solid #eeeef5;
border-radius: 0;
padding: 0 20px;
box-sizing: border-box;
margin: -1px;
background: #fafafc;
}
.float-input-block {
background: #ededf6;
width: 100vw;
height: 100vh;
display: grid;
place-content: center;
}
body {
margin: 0;
}
<div class="float-input-block">
<input class="float-input" type="text" placeholder="Name" />
<input class="float-input" type="text" placeholder="Sobrename" />
<input class="float-input" type="text" placeholder="Email" />
<input class="float-input" type="password" placeholder="Senha" />
</div>
关于css - 仅在第一个和最后一个输入 block 上的边界半径,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63497599/