How can I get Jelly Bean style text fields using CSS? - css

Question

Check out this screenshot:
Is it possible, using only css(3), to get a border around a textfield that only wraps partially up each side?

Answer 1

See the codepen: here
<div class="wrapper">
<input type="text" placeholder="text field">
</div>
<div class="wrapper">
<input type="text" placeholder="Another one">
</div>
with the following 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

This is a bit convoluted but it seems to work: http://jsfiddle.net/3hrNp/2/
However, it would probably be better to use a background image - much simpler.
<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;
}