Подчеркнутый символ или граница на входе

Question

У меня есть поле ввода с только границей внизу, теперь мне нужно создать небольшую строку слева и справа от ввода. Это немного трудно описать, поэтому я буду использовать пример:

input { 
 
    background-color: transparent; 
 
    height: 20px; 
 
    padding: 10px 10px 1px; 
 
    
 
    border: 0; 
 
    border-bottom: 1px solid red; 
 
}

<input type="text" placeholder="Example">

Fiddle

Это то, что у меня есть:

Это то, что я Вам нужно, чтобы это было:

Answer 1

Использование мультипликатор box-shadows на входе может позволить вам иметь этот подчеркивающий эффект:

input { 
 
    height:20px; 
 
    padding:0 5px; 
 
    border: 0; 
 
    box-shadow: -9px 9px 0px -7px red, 9px 9px 0px -7px red; 
 
    width:300px; 
 
}

<input placeholder="Example" type="text" />

The spread radius and the X/Y offset из в Sbox-тени должны быть переделаны, в зависимости от высоты вашего входа в вы можете увидеть в этом примере с более высоким входом:

input { 
 
    height:20px; 
 
    padding:10px 5px; 
 
    border: 0; 
 
    box-shadow: -18px 18px 0px -17px red, 18px 18px 0px -17px red; 
 
    width:300px; 
 
}

<input placeholder="Example" type="text" />

Поддержка браузера для box-shadows is IE9+.

Answer 2

Вы можете сделать это с помощью :after и :before псевдо elemnts.

.field { 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 

 
input { 
 
    background-color: transparent; 
 
    padding: 3px 5px; 
 
    border: 0; 
 
    border-bottom: 2px solid red; 
 
} 
 

 
.field:before, .field:after { 
 
    content: ""; 
 
    position: absolute; 
 
    height: 7px; 
 
    bottom: 0; 
 
    background: red; 
 
    width: 2px; 
 
} 
 

 
.field:before { 
 
    left: 0; 
 
} 
 

 
.field:after { 
 
    right: 0; 
 
}

<div class="field"> 
 
    <input type="text" placeholder="Example"> 
 
</div>

Answer 3

Способ получения формованного подчеркивание отзывчивым чаши, которые не должны быть изменены независимо от заполнения, который наносится на элементе является использование linear-gradient в качестве фонового изображения. Они могут быть заданы background-size в значениях пикселей и располагаться в нижней части элемента.

Сам подход достаточно прост:

• Мы используем border-bottom из 1px толщиной в производить нижнюю границу.
• Линейный градиент, окрашенный в красный цвет для 2px и прозрачный для остальных, добавляется к элементу и расположен в нижней части элемента.
• Настройка background-size определяет высоту левой и правой границ. В фрагменте я установил размер фона как 100% 5px, и поэтому 5px будет фиксированной высотой левой и правой границ. Их высота может быть увеличена при уменьшении, только изменяя этот параметр.
• background-repeat установлен так, что фоновое изображение повторяется по оси x и задавая отрицательное смещение 1px для background-position, мы гарантируем, что слева отображается 1px красной границы 1-й градиентной плитки.Так как у нас есть repeat-x on, а размер фона - всего 100%, второй фрагмент по оси x будет начинаться с 1px до конца с самого начала, и таким образом это создаст границу 1px с правой стороны.

Примечание: Коробчатая тень имеет преимущество над этим подходом с точки зрения поддержки браузера. Это только IE10 +.

input { 
 
    background-color: transparent; 
 
    height: 20px; 
 
    width: 300px; 
 
    padding:10px 5px; 
 
    border: 0; 
 
    border-bottom: 1px solid red; 
 
    background-image: linear-gradient(to right, red 2px, transparent 2px); 
 
    background-repeat: repeat-x; 
 
    background-size: 100% 10px; 
 
    background-position: -1px 100%; 
 
} 
 

 
input:nth-child(2) { 
 
    padding: 0 5px; 
 
} 
 

 
input:nth-child(3) { 
 
    padding: 10px 10px 1px; 
 
} 
 
input:nth-child(4) { 
 
    height: 20px; 
 
    padding: 10px 10px 1px; 
 
}

<!-- prefix free library is optional and is only to avoid browser prefixing --> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> 
 

 
<input type="text" placeholder="Example"> 
 
<br/> 
 
<input type="text" placeholder="Example2"> 
 
<br/> 
 
<input type="text" placeholder="Example3"> 
 
<br/> 
 
<input type="text" placeholder="Example4">