How do I add a “search” button in a text input field?

by

Put the image into the span, for example using background-image, then give it a relative position and move it to the left so it overlaps the right end of the search box, for example:

#g-search-button {
  display: inline-block;
  width: 16px;
  height: 16px;
  position: relative;
  left: -22px;
  top: 3px;

  background-color: black;  /* Replace with your own image */
}

Working example on JSBin

More Related Contents:

  1. Put icon inside input element in a form
  2. What characters can be used for up/down triangle (arrow without stem) for display in HTML?
  3. Can I change the color of Font Awesome’s cog icon?
  4. Can't remove text decoration
  5. How to make double border on left only with thick outside and thin inside [duplicate]
  6. Why my HTML input field is ‘readonly’ by default [closed]
  7. Bootstrap height
  8. Centering in CSS Grid
  9. What are the implications of using “!important” in CSS? [duplicate]
  10. How to style the parent element when hovering a child element?
  11. How to make this arrow in CSS only?
  12. Bootstrap 3 two columns full height
  13. Why does IE9 switch to compatibility mode on my website?
  14. Why is vertical-align: middle not working on my span or div?
  15. Maintain image aspect ratio when changing height
  16. How to change the length/position of text-decoration:underline?
  17. IE6 + IE7 CSS problem with overflow: hidden; – position: relative; combo
  18. How to disable the resize grabber of ? [duplicate]
  19. I can’t get my font-awesome icons to show up. Tried importing css with multiple methods
  20. Pressing spacebar scrolls page down?
  21. Why is box-sizing acting different on table vs div?
  22. Is this empty space actually margin-right which is not recognized by dev tools?
  23. How do I give a CSS class priority over an id?
  24. Padding the top and the bottom of inline element
  25. how to remove the dotted line around the clicked a element in html
  26. Is it possible to achieve a -like effect without using the tag?
  27. Font Awesome & Unicode
  28. How to make one span both columns in a two column table?
  29. CSS crop string in the middle
  30. What does “semantically correct” mean?

Leave a Comment