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.

相关标签:

Answer 1

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>

Answer 2

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>

Answer 3

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>

Answer 4

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

Answer 5

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