Change the appearance of standard elements




Change in standard HTML elements

Very often, the design Department requests to make custom input elements. A lot of options, I made some non-standard, because they are without images and with interesting effects.

Explanation:

Almost all the examples are written using the technology of the anchor tag label, tag input using standard HTML (supported since IE7). Yes, there is a feature and this is the purpose of the same id tag for input and label. But usually it does not cause problems.

 

Checkboxes

First I decided to show how you can make custom checkbox, which will normally be displayed even in IE9 (but not lower, as IE versions do not support rounded corners border-radius).

The "tick" is made using two pseudo-elements :before and :after. Each element has its rounded side.

A little incorrect fulfills Mozilla FF by reducing the opacity to 0 (for border filleted). But this is a known issue and the developers with the 23 version can't (or don't want) to fix it.

  1. #checking-radius {
  2. position: relative;
  3. display: block;
  4. height: 13px;
  5. width: 13px;
  6. border: 1px solid gray;
  7. border-radius: 2px;
  8. cursor: pointer;
  9. }
  10. #checking-radius:before,
  11. #checking-radius:after {
  12. content: "";
  13. position: absolute;
  14. bottom: 2px;
  15. box-sizing: border-box;
  16. opacity: 0;
  17. transition: .2s;
  18. }
  19. #input-radius:checked + #checking-radius:before,
  20. #input-radius:checked + #checking-radius:after {
  21. opacity: 1;
  22. }
  23. #checking-radius:before {
  24. left: -10%;
  25. height: 50%;
  26. width: 50%;
  27. border-right: 1px solid gray;
  28. border-radius: 0 100% 0 0 / 0 100% 0 0;
  29. margin-left: 1px;
  30. }
  31. #checking-radius:after {
  32. right: -10%;
  33. height: 80%;
  34. width: 70%;
  35. border-left: 1px solid gray;
  36. border-radius: 100% 0 0 0 / 100% 0 0 0;
  37. }

 

The second and third examples are made by means of an element with a border-bottom and border-left, and rotated -45 degrees.

  1. #checking-transform-hover,
  2. #checking-transform-click {
  3. position: relative;
  4. display: block;
  5. height: 13px;
  6. width: 13px;
  7. border: 1px solid gray;
  8. border-radius: 2px;
  9. cursor: pointer;
  10. }
  11. #checking-transform-hover:before,
  12. #checking-transform-click:before {
  13. content: "";
  14. position: absolute;
  15. display: block;
  16. height: 6px;
  17. width: 10px;
  18. top: 1px;
  19. left: 3px;
  20. border-width: 0 0 1px 1px;
  21. border-style: solid;
  22. border-color: gray;
  23. transform: rotate(-45deg);
  24. transform-origin: 5px 6px;
  25. opacity: 0;
  26. transition: .4s;
  27. }
  28. #checking-transform-hover:hover:before {
  29. transform: rotate(315deg);
  30. }
  31. #input-transform-hover:checked + #checking-transform-hover:before {
  32. opacity: 1;
  33. }
  34. #input-transform-click:checked + #checking-transform-click:before {
  35. transform: rotate(315deg);
  36. opacity: 1;
  37. }

 

The button "close"

Often, the close button should be on the modal dialog or dialogs. You can do it like this on the DEMO.

The cross is the sign " " (rotated 45 degrees) and not for any other symbol, because its appearance is almost independent of the fonts on the website.

  1. .icon-close {
  2. height: 26px;
  3. width: 26px;
  4. padding: 0 0 0 12px;
  5. border: 1px solid gray;
  6. border-radius: 5px;
  7. box-sizing: border-box;
  8. cursor: pointer;
  9. background-color: lightgray;
  10. transition: background-color .2s;
  11. }
  12. .icon-close:hover {
  13. background-color: white;
  14. }
  15. .icon-close:before {
  16. content: "+";
  17. position: relative;
  18. display: inline-block;
  19. left: -6px;
  20. font-size: 20px;
  21. transform: rotate(45deg);
  22. transition: .4s;
  23. }
  24. .icon-close:hover:before {
  25. transform: rotate(225deg);
  26. }

 

Radio

The first version of radio, I did as with the release of the inner area using the pseudo-element.

  1. .custom-radio-1 {
  2. position: relative;
  3. display: inline-block;
  4. height: 20px;
  5. width: 20px;
  6. border: 2px solid gray;
  7. box-sizing: border-box;
  8. border-radius: 100%;
  9. cursor: pointer;
  10. }
  11. .custom-radio-1:before {
  12. content: "";
  13. position: absolute;
  14. display: block;
  15. top: 2px;
  16. bottom: 2px;
  17. left: 2px;
  18. right: 2px;
  19. border-radius: 100%;
  20. transition: .2s;
  21. }
  22. input[name="radio-1"]:not(:checked) + label:hover:before {
  23. background-color: lightgray;
  24. }
  25. input[name="radio-1"]:checked + label:before {
  26. background-color: gray;
  27. }

 

The second option is made without the use of pseudo-elements, but with a change border when hovered.

  1. .custom-radio-2 {
  2. display: inline-block;
  3. height: 20px;
  4. width: 20px;
  5. border: 2px solid gray;
  6. box-sizing: border-box;
  7. border-radius: 100%;
  8. background-color: white;
  9. cursor: pointer;
  10. transition: .1s;
  11. }
  12. input[name="radio-2"]:not(:checked) + label:hover {
  13. border-width: 4px;
  14. }
  15. input[name="radio-2"]:checked + label {
  16. background-color: lightgray;
  17. }

 

All of the above see in the DEMO.

Live demo
Download ZIP







Found comments - 0






Current text is converted to a smiley
:) :( :0 :@ :# :$ :? :] :[ :} :{ :k :p :x :| :Q :O :S :D :X :C :-) :-( :-0 :-# :-$ :-? :-] :-[ :-} :-{ :-o :-p :-x :-| :-Q :-O :-S :-D :-X :-C :-* :-r :-t :-i :-s :-j :-k :-l :-z :-\ :-/ :-I :-J :-K :-L :-Z ;) ;] ;} ;-) ;-] ;-} =) =( =0 =@ =# =$ =? =] =[ =} ={ =o =p =x =| =Q =O =S =D =X =C
:)

Designer avatar

Gender
Hairs/Hats Mouth
Eyes Glasses
Result