Как делать не стандартные рамки у инпутов?

Question

Есть вот такой инпут я не могу понять как его возможно сделать пытлся, через border, но тогда края у него получаются острые

border-bottom-width: 2px
border-bottom-color: $black
border-bottom-style: solid
box-sizing: border-box
border-bottom-left-radius: 8px
border-bottom-right-radius: 8px

Если же делать через градиент то обводка обрезается

Единственное как я его смог это через добавления второго элемента, возможно ли сделать его бес создания дополнительного блока

Answer 1

input {
  border: 2px solid black;
  border-top-color: transparent;
  border-radius: 8px;
  padding: 4px 8px;
  font-family: monospace;
}

span {
  display: inline-block;
  position: relative;
}

span::before, span::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 8px;
  width: 8px;
  background: white;
  pointer-events: none;
}

span::before {
  left: 0;
}

span::after {
  right: 0;
}

span:focus-within::before, span:focus-within::after {
  content: none;
}

input:focus {
  border-color: black;
  outline: none;
}

<span><input value="It's an input"></span>

Answer 2

острые края у border меняются свойством CSS border-radius: __

Чтобы сделать как на скрине нужно либо настраивать outline , примерно также как и border, либо сделать

input {
outline: none;
}
input:focus {
outline: none;
}

после этого свойство border начнет работать. например вот:

input {
outline: none;
border: none;
border-bottom: 2px solid black;
border-radius: 5px;
}

    <input type="text" placeholder="Ваше имя"></input>

Answer 3

input {
  border: 2px solid black;
  border-radius: 8px;
  padding: 4px 8px;
  font-family: monospace;
  background: transparent;
  clip-path: polygon(
    8px              8px,
    calc(100% - 8px) 8px,
    calc(100% - 8px) calc(100% - 8px),
    100%             calc(100% - 8px),
    100%             100%,
    0                100%,
    0                calc(100% - 8px),
    8px              calc(100% - 8px)
  );
}

input:focus {
  clip-path: none;
  outline: none;
}

body {
  background: linear-gradient(to bottom, white, orange);
}

<input value="It's an input">

БЛОГ НА HUSL

Как делать не стандартные рамки у инпутов?

Ответы (3 шт):