Member Avatar for kyllle

Hi guys I was wondering how I create the following little search for my site, I can code the form but I need to get it looking like this

many thanks

Kyle

  • 3 Contributors
  • 2 Replies
  • 86 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by tiger86

Dani AI

Generated

: since and both noted the image link returns a 404, the exact visual can not be seen here. Below are practical, modern steps to recreate a compact, polished search control that matches most “little search” designs and works well today.

Start with semantic markup and accessibility: use role="search" or <form role="search">, include a visible label (or a screen-reader-only label) rather than relying only on placeholder, and use input type="search" for native browser affordances. For the look, common techniques are a single rounded input with a subtle inset shadow and a right-side submit icon styled as a button, or an input with a background-image magnifying-glass and a separate flat submit. Prefer an SVG icon (inline or as a data-URI) for crispness at any DPI.

Small example (structure only):

<form role="search" action="/search">
  <label class="sr-only" for="q">Search</label>
  <input type="search" id="q" name="q" placeholder="Search...">
  <button type="submit" aria-label="Submit search">🔍</button>
</form>

Styling notes: use border-radius and box-shadow for the rounded, elevated look; padding-right to avoid overlap with the button or background icon; background-size and background-position if using a background-image icon. For performance and responsiveness, keep the control width fluid (max-width) and avoid extra images—sprite or SVG is best. Accessibility cautions: do not remove the label, ensure keyboard focus states are visible, and provide sufficient color contrast for the input and button.

Recommended Answers

All 2 Replies

Member Avatar for oliflorence

The link you have included is wrong!

Member Avatar for tiger86

Could you please provide us with a different link? That one gives us a error 404 page not found so no one can help at the moment.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.