Skip to content

Instantly share code, notes, and snippets.

@nexpr

nexpr/image.md

Last active July 10, 2022 08:17
Show Gist options
  • Save nexpr/0454a7bdb2bc16d9dd632f377409edfc to your computer and use it in GitHub Desktop.
Save nexpr/0454a7bdb2bc16d9dd632f377409edfc to your computer and use it in GitHub Desktop.
Download ZIP
UIライブラリで見かけるようなinputの左上にラベルついてるやつ
Raw
label-input.html
<!DOCTYPE html>
<style>
* {
box-sizing: border-box;
}
fieldset {
padding: 3px;
width: 160px;
}
fieldset:focus-within {
background: #e5ffff;
}
legend {
font-size: 0.75em;
margin: 0 0 -6px 6px;
}
input {
display: block;
border: 0;
background: transparent;
outline: none;
}
</style>
<fieldset>
<legend>Name</legend>
<input>
</fieldset>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment