Member Avatar for davy_yg

Hallo,

How to create search box with custom textbox and custom button ?

I have the images ready, I just do not know how to code it so that it function properly. At least, I can see the appearance on the web.

  • 5 Contributors
  • 4 Replies
  • 128 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by <M/>

Dani AI

Generated

A compact, practical checklist to turn the mockup images you already have into a usable search control, without losing accessibility or responsiveness.

A few things to do first (adds to what and suggested): use semantic HTML (a search form should usually use method="get" so results are bookmarkable), include a visible label or an accessible label (do not rely only on placeholder), and keep keyboard focus outlines so keyboard users can see where they are. If you want the button to look like an image, prefer a button with a CSS background or an inline SVG icon rather than input type="image" — that makes it easier to keep readable text for screen readers.

Example markup and a small helper class (different approach from the snippet in the thread):

<form action="/search" method="get" role="search">
  <label for="site-search" class="sr-only">Search this site</label>
  <input id="site-search" name="q" type="search" placeholder="Search..." />
  <button type="submit" class="search-btn">Search</button>
</form>
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.search-btn {
  background: url("/img/search-icon.svg") no-repeat center;
  background-size: contain; border: 0; width: 40px; height: 40px;
  padding: 0; cursor: pointer;
}

Practical tips and gotchas: use SVG or icon fonts for crisp rendering on retina screens; provide a plain-color fallback (so it still works if images fail); ensure display:inline-block or explicit width/height when using CSS backgrounds; test keyboard focus and mobile tap area (44px minimum recommended). For accessibility references, see MDN: input type=search and the WAI‑ARIA landmark for search (WAI‑ARIA 1.1).

Thanks to for the question, and to , , and @M/ for the starting ideas — combine their CSS tips with the accessibility and markup notes above for a robust result.

Recommended Answers

All 4 Replies

Member Avatar for ss125

do u want image in the form or an button????

For your kind attention, Kindly post the question in a clear manner so that it can save our time and helpfull to all.

Member Avatar for theHop

Text boxes and buttons are fully customisable with CSS. You can set background images, change borders etc

Member Avatar for cmps

It's very easy, just use photoshop to crop the button and the box field. Then in HTML create a form that contain a input for the search box and submit button for the search, to do so:

<form method="POST" action="search.php">
    <input name="search" value="Search keyword ..." type="text" id="searchb">
    <input name="sbutton" value="Search" type="submit" id="submitb">
</form>

Now using css, it's something close to this but you may need to adjust it so it looks perfectly like the image:

#searchb{border:0px; background-image:url('..../search.jpg');}
#submitb{border:0px; background-image:url('..../button.jpg');}
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.