Skip to content

Instantly share code, notes, and snippets.

@marcusellis05
Created July 9, 2014 20:33
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save marcusellis05/4b53ee767798ef211900 to your computer and use it in GitHub Desktop.
Save marcusellis05/4b53ee767798ef211900 to your computer and use it in GitHub Desktop.
The problem with CSS PreProcessors
input[type="email"][readonly]:hover,
input[type="file"][readonly]:hover,
input[type="number"][readonly]:hover,
input[type="password"][readonly]:hover,
input[type="reset"][readonly]:hover,
input[type="search"][readonly]:hover,
input[type="submit"][readonly]:hover,
input[type="button"][readonly]:hover,
input[type="tel"][readonly]:hover,
input[type="text"][readonly]:hover,
input[type="url"][readonly]:hover,
textarea[readonly]:hover,
select[readonly]:hover,
button[readonly]:hover,
.btn[readonly]:hover,
input[type="email"]:disabled:hover,
input[type="file"]:disabled:hover,
input[type="number"]:disabled:hover,
input[type="password"]:disabled:hover,
input[type="reset"]:disabled:hover,
input[type="search"]:disabled:hover,
input[type="submit"]:disabled:hover,
input[type="button"]:disabled:hover,
input[type="tel"]:disabled:hover,
input[type="text"]:disabled:hover,
input[type="url"]:disabled:hover,
textarea:disabled:hover,
select:disabled:hover,
button:disabled:hover,
.btn:disabled:hover,
input[type="email"].disabled:hover,
input[type="file"].disabled:hover,
input[type="number"].disabled:hover,
input[type="password"].disabled:hover,
input[type="reset"].disabled:hover,
input[type="search"].disabled:hover,
input[type="submit"].disabled:hover,
input[type="button"].disabled:hover,
input[type="tel"].disabled:hover,
input[type="text"].disabled:hover,
input[type="url"].disabled:hover,
textarea.disabled:hover,
select.disabled:hover,
button.disabled:hover,
.btn.disabled:hover,
input[type="email"][readonly]:active,
input[type="file"][readonly]:active,
input[type="number"][readonly]:active,
input[type="password"][readonly]:active,
input[type="reset"][readonly]:active,
input[type="search"][readonly]:active,
input[type="submit"][readonly]:active,
input[type="button"][readonly]:active,
input[type="tel"][readonly]:active,
input[type="text"][readonly]:active,
input[type="url"][readonly]:active,
textarea[readonly]:active,
select[readonly]:active,
button[readonly]:active,
.btn[readonly]:active,
input[type="email"]:disabled:active,
input[type="file"]:disabled:active,
input[type="number"]:disabled:active,
input[type="password"]:disabled:active,
input[type="reset"]:disabled:active,
input[type="search"]:disabled:active,
input[type="submit"]:disabled:active,
input[type="button"]:disabled:active,
input[type="tel"]:disabled:active,
input[type="text"]:disabled:active,
input[type="url"]:disabled:active,
textarea:disabled:active,
select:disabled:active,
button:disabled:active,
.btn:disabled:active,
input[type="email"].disabled:active,
input[type="file"].disabled:active,
input[type="number"].disabled:active,
input[type="password"].disabled:active,
input[type="reset"].disabled:active,
input[type="search"].disabled:active,
input[type="submit"].disabled:active,
input[type="button"].disabled:active,
input[type="tel"].disabled:active,
input[type="text"].disabled:active,
input[type="url"].disabled:active,
textarea.disabled:active,
select.disabled:active,
button.disabled:active,
.btn.disabled:active,
input[type="email"][readonly]:focus,
input[type="file"][readonly]:focus,
input[type="number"][readonly]:focus,
input[type="password"][readonly]:focus,
input[type="reset"][readonly]:focus,
input[type="search"][readonly]:focus,
input[type="submit"][readonly]:focus,
input[type="button"][readonly]:focus,
input[type="tel"][readonly]:focus,
input[type="text"][readonly]:focus,
input[type="url"][readonly]:focus,
textarea[readonly]:focus,
select[readonly]:focus,
button[readonly]:focus,
.btn[readonly]:focus,
input[type="email"]:disabled:focus,
input[type="file"]:disabled:focus,
input[type="number"]:disabled:focus,
input[type="password"]:disabled:focus,
input[type="reset"]:disabled:focus,
input[type="search"]:disabled:focus,
input[type="submit"]:disabled:focus,
input[type="button"]:disabled:focus,
input[type="tel"]:disabled:focus,
input[type="text"]:disabled:focus,
input[type="url"]:disabled:focus,
textarea:disabled:focus,
select:disabled:focus,
button:disabled:focus,
.btn:disabled:focus,
input[type="email"].disabled:focus,
input[type="file"].disabled:focus,
input[type="number"].disabled:focus,
input[type="password"].disabled:focus,
input[type="reset"].disabled:focus,
input[type="search"].disabled:focus,
input[type="submit"].disabled:focus,
input[type="button"].disabled:focus,
input[type="tel"].disabled:focus,
input[type="text"].disabled:focus,
input[type="url"].disabled:focus,
textarea.disabled:focus,
select.disabled:focus,
button.disabled:focus,
.btn.disabled:focus {
color: #d5d5d6;
border-color: #eaeaea;
background: #fff;
box-shadow: none;
}
@marcusellis05
Copy link
Author

That 135 line selector was generated by the below LESS code which looks rather innocent at first glance.

input[type="email"],
input[type="file"],
input[type="number"],
input[type="password"],
input[type="reset"],
input[type="search"],
input[type="submit"],
input[type="button"],
input[type="tel"],
input[type="text"],
input[type="url"],
textarea, select, button, .btn {
  border-width: 1px;
  border-style: solid;
  border-color: @generalBorderColor;
  font-size: 13px;

  &:focus {
    border-color: @primary-blue;
  }

  &[readonly],
  &[disabled=disabled],
  &:disabled,
  &.disabled,{
    color: @primary-black-20;
    border-color: @primary-black-10;
    background: #fff;

    &:hover, &:active, &:focus {
      color: @primary-black-20;
      border-color: @primary-black-10;
      background: #fff;
      box-shadow:none;
    }
  }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment