# How do you change the look of a HTML search button

**URL:** <https://forum.kirupa.com/t/how-do-you-change-the-look-of-a-html-search-button/10254>\
**Category:** Uncategorized\
**Created:** [December 27, 2002, 10:19pm UTC](https://forum.kirupa.com/t/how-do-you-change-the-look-of-a-html-search-button/10254 "2002-12-27T22:19:55Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![chris9902](https://avatars.discourse-cdn.com/v4/letter/c/eb9ed0/32.png) [@chris9902](https://forum.kirupa.com/u/chris9902)\
**Post date:** [December 27, 2002, 10:19pm UTC](https://forum.kirupa.com/t/how-do-you-change-the-look-of-a-html-search-button/10254/1 "2002-12-27T22:19:55Z")

</div>

you no those grey buttons that say search on

no?.. look on [www.yahoo.com](http://www.yahoo.com)

YES… well how do you change what they look like

thanks alot for any help

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [December 27, 2002, 10:35pm UTC](https://forum.kirupa.com/t/how-do-you-change-the-look-of-a-html-search-button/10254/2 "2002-12-27T22:35:00Z")

</div>

Check out this thread. it answers your question:

[http://www.kirupaforum.com/showthread.php?s=&threadid=10200](http://www.kirupaforum.com/showthread.php?s=&threadid=10200)

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [December 27, 2002, 10:35pm UTC](https://forum.kirupa.com/t/how-do-you-change-the-look-of-a-html-search-button/10254/3 "2002-12-27T22:35:06Z")

</div>

You can change the color using CSS, here is a link that would help.

[http://www.boogiejack.com/howx026.html](http://www.boogiejack.com/howx026.html)

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [December 27, 2002, 10:52pm UTC](https://forum.kirupa.com/t/how-do-you-change-the-look-of-a-html-search-button/10254/4 "2002-12-27T22:52:37Z")

</div>

ok that went so far over my head…

this is the code for my ATOMZ search feild.

* * *

\<!-- Atomz Search HTML for GTA\_games --\>  
\<form method=“get” action=“[http://search.atomz.com/search/](http://search.atomz.com/search/)”\>  
\<input size=15 name=“sp-q”\>\<br\>  
\<input type=submit value=“Search”\>  
\<input type=hidden name=“sp-a” value=“sp10023518”\>  
\<input type=hidden name=“sp-p” value=“any”\>  
\<input type=hidden name=“sp-f” value=“ISO-8859-1”\>

* * *

i need the button to be square, black with grey writing in

and the text feild to be black with a grey border and grey writing

also both need to be the same length with the word search in the middle but the text in the text area to start from the left

if thats possible

thanks to ANYONE who can

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [December 27, 2002, 10:53pm UTC](https://forum.kirupa.com/t/how-do-you-change-the-look-of-a-html-search-button/10254/5 "2002-12-27T22:53:36Z")

</div>

\<\*!-- Atomz Search HTML for GTA\_games --\>  
\<\*form method=“get” action=“[http://search.atomz.com/search/](http://search.atomz.com/search/)”\>  
\<\*input size=15 name=“sp-q”\>\<br\>  
\<\*input type=submit value=“Search”\>  
\<\*input type=hidden name=“sp-a” value=“sp10023518”\>  
\<\*input type=hidden name=“sp-p” value=“any”\>  
\<\*input type=hidden name=“sp-f” value=“ISO-8859-1”\>

thats the code

remove \*'s

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [December 27, 2002, 11:13pm UTC](https://forum.kirupa.com/t/how-do-you-change-the-look-of-a-html-search-button/10254/6 "2002-12-27T23:13:12Z")

</div>

read thru the post that I gave you and check out the link that Egeek gave you. they will help you, and they answer your question.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [December 28, 2002, 9:54pm UTC](https://forum.kirupa.com/t/how-do-you-change-the-look-of-a-html-search-button/10254/7 "2002-12-28T21:54:45Z")

</div>

You can also use a image as a submit button. Some sites do that and peeps think it is css.

_input name=“button” type=“image” src=“yourimage.jpg”_

this can also jazz up a form.

replace \* with \< \>

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [December 28, 2002, 10:12pm UTC](https://forum.kirupa.com/t/how-do-you-change-the-look-of-a-html-search-button/10254/8 "2002-12-28T22:12:28Z")

</div>

thanks to everyone how helped

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [December 28, 2002, 11:35pm UTC](https://forum.kirupa.com/t/how-do-you-change-the-look-of-a-html-search-button/10254/9 "2002-12-28T23:35:08Z")

</div>

You mean like this…???

\<!-- Atomz Search HTML for GTA\_games --\>  
\<form method=“get” action=“[http://search.atomz.com/search/](http://search.atomz.com/search/)”\>  
\<input size=“16” name=“sp-q” STYLE=“border:1px solid #000000;background-color: #000000;color: #999999;”\>\<br\>  
\<input type=“submit” value=“Search” width=“155” STYLE=“border:1px solid #000000;background-color: #000000;color: #999999;”\>  
\<input type=“hidden” name=“sp-a” value=“sp10023518”\>  
\<input type=“hidden” name=“sp-p” value=“any”\>  
\<input type=“hidden” name=“sp-f” value=“ISO-8859-1”\>  
\</form\>

```php
<STYLE TYPE="text/css">
<!--
.searchField {
border:1px solid #000000;
background-color: #000000;
color: #999999;
}
-->
</STYLE>
<!-- Atomz Search HTML for GTA_games -->
<form method="get" action="http://search.atomz.com/search/">
<input size="16" name="sp-q" class="searchField"><br>
<input type="submit" value="Search" width="155" class="searchField">
<input type="hidden" name="sp-a" value="sp10023518">
<input type="hidden" name="sp-p" value="any">
<input type="hidden" name="sp-f" value="ISO-8859-1">
</form>

```

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [December 28, 2002, 11:37pm UTC](https://forum.kirupa.com/t/how-do-you-change-the-look-of-a-html-search-button/10254/10 "2002-12-28T23:37:19Z")

</div>

grrrrrrrr

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [December 28, 2002, 11:38pm UTC](https://forum.kirupa.com/t/how-do-you-change-the-look-of-a-html-search-button/10254/11 "2002-12-28T23:38:40Z")

</div>

LOL, what was that about Jubba?

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [December 29, 2002, 12:52am UTC](https://forum.kirupa.com/t/how-do-you-change-the-look-of-a-html-search-button/10254/12 "2002-12-29T00:52:09Z")

</div>

thanks alot but now i can make image buttons i have more to play with

thanks alot

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [December 29, 2002, 12:56am UTC](https://forum.kirupa.com/t/how-do-you-change-the-look-of-a-html-search-button/10254/13 "2002-12-29T00:56:46Z")

</div>

one last thing, is it possible to change the alpha

and the font and the size of the font so the box is smaller

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [December 29, 2002, 1:04am UTC](https://forum.kirupa.com/t/how-do-you-change-the-look-of-a-html-search-button/10254/14 "2002-12-29T01:04:54Z")

</div>

You cannot change the alpha but the font can be done with css

```php

<style>
     .submitbtn {
           font-family: arial,verdana;
           font-size: 8px;
     }
</style>

```

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [December 29, 2002, 3:02am UTC](https://forum.kirupa.com/t/how-do-you-change-the-look-of-a-html-search-button/10254/15 "2002-12-29T03:02:01Z")

</div>

I gave him a link to the answers and Egeek posted a link to a TUTORIAL about exactly what he wanted, and he probably looked at it for two seconds and then said:

“THAT WENT WAY OVER MY HEAD”

that pisses me off…and then you just supplied to code…So he learned nothing except how to cut and paste.

lazy.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [December 29, 2002, 5:55am UTC](https://forum.kirupa.com/t/how-do-you-change-the-look-of-a-html-search-button/10254/16 "2002-12-29T05:55:34Z")

</div>

Maybe he was pressed for time. Its cool tho. I have been like that b4 where I did not feel like reading. Maybe he will look into learning it for himself later. I post allot of code for his other posts also. You think we helped too much??

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [December 29, 2002, 6:50am UTC](https://forum.kirupa.com/t/how-do-you-change-the-look-of-a-html-search-button/10254/17 "2002-12-29T06:50:36Z")

</div>

Well actually yeah. I don’t like it when people just post the code for someone. Because then they aren’t really learning anything. They just copy and paste the code and they are good to go. When I ask for help, I usually just ask for a push, something to start with and then I figure out the rest on my own. Egeek gave him a link to an actually tutorial that told him how to do it step by step… Just saying, “Wow that was over my head” is like saying, “can you just supply me with everything that I need to do because I am too lazy to do it myself…” Just IMO…

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [December 29, 2002, 7:30am UTC](https://forum.kirupa.com/t/how-do-you-change-the-look-of-a-html-search-button/10254/18 "2002-12-29T07:30:05Z")

</div>

Sorry Man…I have received so much help here in the past I get all jolly when I can help…I try to explain when I post maybe he read that. I never thought about it as being lazy but I guess it is. But I still feel good I helped.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [December 29, 2002, 8:32am UTC](https://forum.kirupa.com/t/how-do-you-change-the-look-of-a-html-search-button/10254/19 "2002-12-29T08:32:26Z")

</div>

No need to apologize. You may not see it the way I do. Not many people see things the way I do. I try to help people by letting them help themselves. They didn’t want to read the documentation I provided, even though it completely and thoroughly answered their question… that just irks me. That says to me, “You wasted your time providing a link so this person could take a quick look at it, see that it had more than 3 words on the page and say ‘oops too much work, let me ask again and maybe someone will just post the code for me, so I don’t have to do any work’”

Thats just how I see things… I know, I know…I"m a little messed up :)😛

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [December 29, 2002, 8:46am UTC](https://forum.kirupa.com/t/how-do-you-change-the-look-of-a-html-search-button/10254/20 "2002-12-29T08:46:23Z")

</div>

I agree with Jubba, I know 3d-iva has good intentions about providing just the code for everything, but it’s not teaching chris9902 how the code works. Jubba isn’t being messed up for making him read the threads for the answer, but actually helping him understand how everything works. Reading and experimenting is the best way of learning instead of copying and pasting.

[Next page](https://forum.kirupa.com/t/how-do-you-change-the-look-of-a-html-search-button/10254.md?page=2)