碗式輸入下劃線或邊界

我有一個底部只有一個邊框的輸入域，現在我需要在輸入的左側和右側創建一條小線。這是一個比較難形容，所以我會用一個例子：碗式輸入下劃線或邊界

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

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

Fiddle

這是我有：

這是我需要它看起來像：

來源

2016-01-23 Duncan Luk

輸入使用多個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" />

S盒陰影的spread radius and the X/Y offset需要根據您輸入的高度進行調整您可以在此示例中看到更高的輸入：

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

來源

2016-01-23 11:24:16

是否有可能改變行'1px'的寬度是多少？另外，當我在填充的輸入上使用它時，邊上的線會變得太長。有可能給這些固定的高度嗎？ –

@Duncan您需要調整盒子陰影的擴展半徑和Y偏移量，以使左右線達到所需的高度。不幸的是，它們的高度將根據輸入的高度而改變。我會再舉一個例子。 –

[我的意思是一個例子]（https://jsfiddle.net/38f5ygpe/1/） –

你可以用:after和:before假元素來做到這一點。

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

來源

2016-01-23 11:48:20

以產生響應碗狀下劃線其不需要被修飾無關，其在元件上施加了填充的一種方法是使用如linear-gradient背景圖像。它們可以以像素值給出background-size，並位於元素的底部。

的做法本身是相當簡單：

我們用1像素的border-bottom的厚度產生底部邊框。
一個紅色爲2px且其餘爲透明的線性漸變添加到該元素並位於該元素的底部。
background-size設置確定左右邊界的高度。在代碼片段中，我將背景大小設置爲100% 5px，因此5px將是左右邊框的固定高度。僅通過單獨修改這個參數就可以減少它們的高度。
設置background-repeat以便背景圖像在x軸上重複，併爲background-position設置1px的負偏移量，我們確保第一個漸變圖塊的紅色邊框的1px顯示在左側。由於我們有repeat-x並且背景大小僅爲100％，因此x軸上的第二個圖塊將從右側的結束之前的1px開始，因此這會在右側生成1px邊框。

注意：在瀏覽器支持方面，Box shadow在這種方法上具有優勢。這只是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">

來源

2016-01-23 12:15:35 Harry

碗式輸入下劃線或邊界

回答

相關問題