Skip to content

Instantly share code, notes, and snippets.

@bbbrrriiiaaannn

bbbrrriiiaaannn/SassMeister-input-HTML.html

Created June 16, 2014 21:36
Show Gist options
  • Save bbbrrriiiaaannn/d3163bc807a14e3e0a30 to your computer and use it in GitHub Desktop.
Save bbbrrriiiaaannn/d3163bc807a14e3e0a30 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<input placeholder="placeheld" />
Raw
SassMeister-input.sass
// ----
// Sass (v3.2.19)
// Compass (v0.12.6)
// ----
input
background-color: #ebebeb
@each $placeholder in '::-webkit-input-placeholder', '::-moz-placeholder', ':-ms-input-placeholder'
&#{$placeholder}
color: black
text-transform: uppercase
font-weight: bold
transition: opacity .2s ease
&:focus#{$placeholder}
opacity: 0
Raw
SassMeister-output.css
input {
background-color: #ebebeb;
}
input::-webkit-input-placeholder {
color: black;
text-transform: uppercase;
font-weight: bold;
transition: opacity 0.2s ease;
}
input:focus::-webkit-input-placeholder {
opacity: 0;
}
input::-moz-placeholder {
color: black;
text-transform: uppercase;
font-weight: bold;
transition: opacity 0.2s ease;
}
input:focus::-moz-placeholder {
opacity: 0;
}
input:-ms-input-placeholder {
color: black;
text-transform: uppercase;
font-weight: bold;
transition: opacity 0.2s ease;
}
input:focus:-ms-input-placeholder {
opacity: 0;
}
Raw
SassMeister-rendered.html
<input placeholder="placeheld" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment