how to give input border left and right small length

Question

I need to display the input field and i need give border bottom , left and right. But here i want only small portion border left side and right side.

.solid {
  border-style: solid;
  border-left-style: dashed;
  border-top: none;
  border-right-style: dashed;
}

<input class="solid">

score 3 · Answer 1 · answered Dec 01 '16 at 11:38

3

You can use box-shadow to create this type of border.

input {
  width: 300px;
  border: none;
  margin: 50px;
  height: 35px;
  box-shadow: 13px 13px 0px -10px #000000, -13px 13px 0px -10px #000000;
  outline: none;
  font-size: 22px;
  background: none;
}

<input type="text">

answered Dec 01 '16 at 11:38

Nenad Vracar

118,580
15
151
176

kako ga neno zavrsi u 10 linija :) – Dec 01 '16 at 11:51
This solution is a piece of art. Kudos for doing it the correct way, by not using extra tags. – dj50 Dec 27 '20 at 18:18

score 1 · Accepted Answer · answered Dec 01 '16 at 11:35

1

Here you go. I had to add a div element outside the input field to use the before and after selectors.

.field {
  position: relative;
  display: inline-block;
}
.solid {
  border: none;
  border-bottom: 2px solid #000;
  padding: 5px;
}
.solid:focus {
  outline: none;
}
.field::after {
  content: '';
  width: 2px;
  height: 10px;
  position: absolute;
  background: #000;
  bottom: 0;
  right: 0;
}
.field::before {
  content: '';
  width: 2px;
  height: 10px;
  position: absolute;
  background: #000;
  bottom: 0;
  left: 0;
  z-index: 1;
}

<div class="field">
  <input class="solid" type="text">
</div>

answered Dec 01 '16 at 11:35

Aslam

9,204
4
35
51

1

User dosen't want div either – Felix A J Dec 01 '16 at 11:39
@FelixAJ : If he uses list item then he had to write alot more code to format the list. A div is a genertic item and can be used normally. – Aslam Dec 01 '16 at 11:41

score 1 · Answer 3 · edited May 23 '17 at 12:01

Here is how you can give input border left and right of small length

Html

<input type="text">

CSS

input[type="text"] {
padding: 20px;
background: linear-gradient(#000, #000), linear-gradient(#000, #000),linear-gradient(#000, #000);
background-size: 1px 20%, 100% 1px, 1px 20%;
background-position: bottom left, bottom center, bottom right;
background-repeat: no-repeat;
border: none;
color: #999;
}

Find the working fiddle

Reference

score 0 · Answer 4 · answered Dec 01 '16 at 11:48

html,body,input {
  padding: 0;
  margin: 0;
  border: 0;
  background-color: transparent;
}
.input-block {
  position: relative;
  width: 216px;/* important to define input width;width of input + 2x padding*/
  margin: 0 auto;
}
input {
  width: 208px;
  padding: 0 4px;
  outline: none;
  border-bottom: 1px solid black;
}
.input-lr-border {
  position: absolute;
  width: 1px;
  background-color: black;
  bottom: 0;
  height: 4px;
}
.left-border-input {
  left: 0;
}
.right-border-input {
  right: 0;
}

<div class="input-block">
  <div class="left-border-input input-lr-border"></div>
  <input/>
  <div class="right-border-input input-lr-border"></div>
</div>

Felix A J · Answer 5 · 2016-12-01T11:32:15.610

-1

li{
list-style: none;
width: 200px;
border-bottom: 2px solid #000;
position: relative;
padding: 2px 5px;
margin: 0 0 10px;
}
li:before, li:after{
  background: #000;
  content: '';
  position: absolute;
  bottom: 0;
  width: 2px;
  height: 5px;
}
li:before{
  left: 0;
}
li:after{
  right: 0;
}
input{
  border:0;
outline: none;
}

<ul>
  <li><input type="text" placeholder="First Name" /></li>
  <li><input type="text" placeholder="Last Name" /></li>
  <li><input type="text" placeholder="Email" /></li>
</ul>

edited Dec 01 '16 at 11:32

answered Dec 01 '16 at 11:28

Felix A J

6,300
2
27
46

Felix....i need to diaply input fields not for ul,li. When i focus it is showing the blue color border for the input – VK Chikkadamalla Dec 01 '16 at 11:30
Is it not possible to nest the input inside `li` as in the edited answer ? – Felix A J Dec 01 '16 at 11:35
The user question was not to use list items. – Aslam Dec 01 '16 at 11:36

how to give input border left and right small length

5 Answers5

Linked

Related