css - 仅在第一个和最后一个输入 block 上的边界半径

Question

我在设置第一个和最后一个输入 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);
    }
}

它应该是什么样子:

Answer 1

虽然在大多数情况下我会使用@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>