如何获得使用CSS的Jelly Bean样式文本字段？

Question

看看这个截图：

是否有可能，只使用CSS（3），绕过一个文本框，只有部分包裹起来两侧的边界？

Answer 1

见codepen：here

<div class="wrapper"> 
    <input type="text" placeholder="text field"> 
</div> 

<div class="wrapper"> 
<input type="text" placeholder="Another one"> 
</div> 

与下面的CSS：

* { 

    box-sizing: border-box; 

} 


body { 

    background: #dfdfdf; 

} 


input { 

    width: 250px; 
    text-transform: uppercase; 
    position: relative; 
    background: #dfdfdf; 
    color: #444; 
    padding: 5px; 
    border: 0; 
    outlne: none; 
    display: block; 

} 

input:focus { 

    outline:none; 

} 


.wrapper { 

    position: relative; 
    left: 50%; 
    margin-left: -125px; 
    margin-top: 50px; 
    width: 250px; 
    border-bottom: 1px solid #888; 

} 


.wrapper:before { 

    width: 1px; 
    height: 5px; 
    background-color: #888; 
    content: " "; 
    display: block; 
    position: absolute; 
    bottom: 0px; 
    left: -1px; 

} 

.wrapper:after { 

    width: 1px; 
    height: 5px; 
    background-color: #888; 
    content: " "; 
    display: block; 
    position: absolute; 
    bottom: 0px; 
    right: 0px; 

} 

.wrapper:hover::after, .wrapper:hover::before { 

    background: #57B8D6; 
    width: 2px; 

} 

.wrapper:hover::after { 

    right: 0px; 

} 

.wrapper:hover::before { 

    left: 0px; 

} 

.wrapper:before { 

    left: 0px; 
    z-index: 100; 

} 

.wrapper:hover { 

    border-bottom: 2px solid #57B8D6; 
    margin-top: 50px; 
    margin-left: -125px; 

} 

Answer 2

这是一个有点令人费解，但它似乎工作：http://jsfiddle.net/3hrNp/2/

但是，它可能会更好地使用背景图片 - 简单得多。

<div class="container">  
    <div class="parent"> 
     <input type="textbox" value="Username or email" /> 
     <div class="inner"></div> 
    </div> 
    <br /> 
    <div class="parent"> 
     <input type="textbox" value="Password" /> 
     <div class="inner"></div> 
    </div> 
</div> 

CSS：

.container { 
    width: 210px; 
    background-color: #F1F0EE; 
    padding: 10px; 
} 

.parent { 
    border: none; 
    width: 200px; 
    position: relative; 
} 

.inner { 
    position: absolute; 
    width: 200px; 
    height: 3px; 
    bottom: 5px; 
    left: 0; 
    border: solid 2px #CCCBCA; 
    border-top: none; 
} 

input:focus + div.inner { 
    border: solid 2px #57B8D6; 
    border-top: none; 
} 

input { 
    margin: 5px; 
    width: 190px; 
    padding: 5px; 
    border: none; 
    color: #6E6F6F; 
    background-color: #F1F0EE; 
}