Posted By

robnilas on 01/21/17


Tagged


Versions (?)

SEARCH FORM


 / Published in: CSS
 

  1. #top-bar {
  2. background: #333333;
  3. width: 100%;
  4. height: 43px;
  5. border-bottom: 3px #fff solid;
  6. box-shadow: 0 1px 5px 2px rgba(0,0,0,0.15);
  7. position: fixed;
  8. z-index: 10;
  9. }
  10. .container {
  11. width: 980px;
  12. margin: auto;
  13. position: relative;
  14. clear: both;
  15. }
  16. #top-bar p {
  17. font: 400 15px/43px 'Asap', Helvetica, sans-serif;
  18. color: #fff;
  19. float: left;
  20. }
  21. #top-bar #searchform {
  22. float: right;
  23. margin-top: 4px;
  24. }
  25. .assistive-text {
  26. position: absolute !important;
  27. clip: rect(1px 1px 1px 1px);
  28. clip: rect(1px, 1px, 1px, 1px);
  29. }
  30. input[type=text], input[type=password], input[type=email], input[type=url], input[type=number], textarea {
  31. background: #fafafa;
  32. -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
  33. -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
  34. box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
  35. border: 1px solid #ddd;
  36. color: #888;
  37. }
  38.  
  39. input[type="submit"] {
  40. font-family: 'Open Sans Condensed';
  41. }
  42.  
  43. input#s {
  44. background: #484848 url('http://digitalmarketer.com/wp-content/themes/digitalmarketer/images/search.png') no-repeat 240px 6px;
  45. -moz-border-radius: 2px;
  46. border-radius: 2px;
  47. height: 22px;
  48. line-height: 1.2em;
  49. padding: 4px 10px;
  50. color: #fff;
  51. margin-top: 2px;
  52. width: 250px;
  53. border: none;
  54. font: 400 15px/15px 'Asap', Helvetica, sans-serif;
  55. }
  56. input#s:focus {
  57. color: #fff!important;
  58. background: #5C5C5C url('images/search.png') no-repeat 290px 6px;
  59. transition: all 0.5s ease-in-out;
  60. -webkit-transition: all 0.5s ease-in-out;
  61. -moz-transition: all 0.5s ease-in-out;
  62. width: 300px;
  63. }
  64. :focus {
  65. outline: 0;
  66. }
  67. input#searchsubmit {
  68. display: none;
  69. }

Report this snippet  

You need to login to post a comment.