mboehler3 Posted January 12, 2011 Share Posted January 12, 2011 Hi, I have a search bar on my website and I want to customize how the "GO" button looks. I want to have a tiny magnifying glass as the "GO" button, and I want it to float right inside of the search box. Very much like this: How can I accomplish this? Is it as easy as customizing the <input type="image"> field? Link to comment Share on other sites More sharing options...
ShadowMage Posted January 12, 2011 Share Posted January 12, 2011 How can I accomplish this? Is it as easy as customizing the <input type="image"> field?Yes it can be. I guess it really depends on what the html looks like. Link to comment Share on other sites More sharing options...
Synook Posted January 13, 2011 Share Posted January 13, 2011 Just use positioning to shift the image input into the text input. Link to comment Share on other sites More sharing options...
Ingolme Posted January 15, 2011 Share Posted January 15, 2011 I'd put both the text input and the submit button into one container, use CSS to remove borders and background from the input and the button and then put a background image on the submit button.Also using CSS to give the button and the input appropriate widths and heights. Link to comment Share on other sites More sharing options...
ShadowMage Posted January 17, 2011 Share Posted January 17, 2011 I'd put both the text input and the submit button into one container, use CSS to remove borders and background from the input and the button and then put a background image on the submit button.Also using CSS to give the button and the input appropriate widths and heights.Why use a button? An image input works the same and you won't have to remove any borders or backgrounds from it. Link to comment Share on other sites More sharing options...
Ingolme Posted January 17, 2011 Share Posted January 17, 2011 Why use a button? An image input works the same and you won't have to remove any borders or backgrounds from it.I just prefer using submit buttons because you don't have to include the image URL in your HTML (for if you want to change this button in a lot of files) and I don't like the extra input.x and input.y that are added onto the query string when the form is submitted. Link to comment Share on other sites More sharing options...
Rough Divide Posted January 17, 2011 Share Posted January 17, 2011 I just prefer using submit buttons because you don't have to include the image URL in your HTML (for if you want to change this button in a lot of files) and I don't like the extra input.x and input.y that are added onto the query string when the form is submitted.It would also be semantically correct, wouldn't it? Link to comment Share on other sites More sharing options...
Ingolme Posted January 17, 2011 Share Posted January 17, 2011 I guess, though I don't think it makes much of a difference. They're both input elements and their intention is to submit the form. The image input simply submits the coordinates of the part of the image that you clicked on along with the rest of the form data. Using image type inputs was what they had to do to customize their buttons before CSS existed so I take it as an outdated practise. Link to comment Share on other sites More sharing options...
ShadowMage Posted January 17, 2011 Share Posted January 17, 2011 I just prefer using submit buttons because you don't have to include the image URL in your HTML (for if you want to change this button in a lot of files)...Ah. Yeah, I suppose that would make sense. Maintainability....Using image type inputs was what they had to do to customize their buttons before CSS existed so I take it as an outdated practise.Hmm...never thought of that. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.