如何给出输入边框左右小长度

Question

我需要显示输入字段，我需要给出底部，左边和右边的边框。但在这里我只想要左边和右边的小部分边框。

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

<input class="solid">

Answer 1

您可以使用box-shadow创建此类边框。

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

Answer 2

你走了。我必须在输入字段外添加一个div元素才能使用前后选择器。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

以下是如何给出小长度左右输入边框

<强> 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;
}

找到有效的fiddle

Reference

Answer 4

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 5

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>