Border radius only on first and last input-block

user_14134638 0
Viewed 139

I'm having trouble on setting borders on the first and last input-blocks.

EDIT: I'm using React on this.

I've tried:

.float-input-block:first-child {
    border-radius: 0.8rem;
}

but nothing happened.

Here's my HTML:

<div className="float-input-block">
  <input className="float-input" type="text" id={name} {...rest} />
  <label className="float-label" htmlFor={name}>{label}</label>
</div>

Here's my 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);
    }
}

And how it should look like:

enter image description here

reactjs input css
3 Answers

Although I would use @jinongun's answer in most cases, here is the solution to fixing your code.

You should change className to class and htmlFor to for. className and htmlFor are JavaScript properties.

.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>

user_125464770

I just styled the containers directly with the style props:

<FloatInput
    style={{ borderRadius: '0.8rem 0.8rem 0 0' }}
    name="nome"
    label="Nome"
    placeholder="Nome"
    required
    value={name}
    onChange={(e) => { setName(e.target.value) }}
/>

Thanks to everyone who's trying to help me. if anyone knows a better way to do it, feel free to write!

user_141346380

I have a different idea.

.wrapper{
  width: 120px;
  border: 1px solid red;
  border-radius: 15px;
  overflow: hidden;
}
.wrapper > .row{
  height: 30px;
  text-align: center;
  background: gray;
}
<div class="wrapper">
  <div class="row">1</div>
  <div class="row">2</div>
  <div class="row">1</div>
  <div class="row">2</div>
</div>

Just add border-radius, overflow on the outside div.

user_84370990
Related