Advertisement
afsarwebdev

Input Radio Style CSS

Aug 28th, 2017
121
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 0.95 KB | None | 0 0
  1. //HTML
  2. <label class="ic-radio" for="user"> <input type="radio" name="man" value="" id="user" checked>
  3. <i></i>ইউজার</label>
  4. <label class="ic-radio" for="doctor"> <input type="radio" name="man" value="" id="doctor" checked>
  5. <i></i>ডাক্তার / পরামর্শক</label>
  6.  
  7. //CSS
  8. label.ic-radio {
  9. padding-right: 130px;
  10. }
  11. .ic-radio > i {
  12. display: inline-block;
  13. vertical-align: middle;
  14. width: 16px;
  15. height: 16px;
  16. border-radius: 50%;
  17. -webkit-transition: 0.2s;
  18. transition: 0.4s;
  19. box-shadow: inset 0 0 0 8px #fff;
  20. border: 1px solid #ff0485;
  21. background: #ff0485;
  22. margin-right: 20px;
  23. margin-top: -5px;
  24. }
  25. .ic-radio > input {
  26. visibility: hidden;
  27. position: absolute;
  28. top: 3px;
  29. left: 17px;
  30. margin: 0;
  31. }
  32. .ic-radio > input:checked + i {
  33. box-shadow: inset 0 0 0 0px #fff;
  34. background: #ff0485;
  35. width: 16px;
  36. height: 16px;
  37. border: none;
  38. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement