Skip to content

Instantly share code, notes, and snippets.

@cecilemuller
Created January 13, 2012 02:19
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save cecilemuller/1604274 to your computer and use it in GitHub Desktop.
Save cecilemuller/1604274 to your computer and use it in GitHub Desktop.
Display textfield labels in the style of fieldset legends
.fieldset {
position: relative;
font-size: sans-serif;
display: block;
width: 100%;
padding: 0;
margin: 20px 0;
height: 64px;
}
.fieldset label {
position: absolute;
top: 0;
left: 10px;
z-index: 1;
color: black;
font-size: 12px;
background: #EEEEEE;
border: 1px solid #DADADA;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
padding: 4px 8px;
}
.fieldset .text {
position: absolute;
display: block;
z-index: 0;
top: 10px;
left: 0;
right: 0;
bottom: 0;
border: 1px solid #DADADA;
padding: 12px 12px 0;
}
<div class="fieldset">
<label>Your name</label>
<input type="text" class="text" />
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment