如何給輸入邊框左右小長度

我需要顯示輸入框，我需要給出邊框底部，左邊和右邊。但在這裏，我只想要一小部分邊界左側和右側。如何給輸入邊框左右小長度

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

<input class="solid">

來源

2016-12-01 VK Chikkadamalla

在這裏你去。我不得不在輸入字段外添加一個div元素來使用前後選擇器。

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

來源

2016-12-01 11:35:26 Aslam

用戶不想要div –

@FelixAJ：如果他使用列表項，那麼他不得不編寫更多代碼來格式化列表。 div是一個普通的項目，可以正常使用。 – Aslam

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

來源

2016-12-01 11:28:59

菲利克斯....我需要diaply不是UL，李輸入字段。當我關注它時，顯示輸入的藍色邊框 –

在編輯的答案中不能嵌套'li'中的輸入嗎？ –

用戶問題不是使用列表項目。 – Aslam

您可以使用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">

來源

2016-12-01 11:38:34

kako ga neno zavrsi u 10 linija :) – 2016-12-01 11:51:09

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>

來源

2016-12-01 11:48:18

這裏是你如何給輸入邊界左，小長權

的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

來源

2016-12-01 12:22:19

如何給輸入邊框左右小長度

回答

相關問題