Search button shadow
Zipotontic
I just made my search button/icon clickable by adding a transparent button onto the input field. Not sure this is the right way to go about it but I couldn't think of anything else outside of jQuery/javascript which I'm not very experienced with. Seems to work fine except the hidden button isn't totally hidden... I've made the background transparent and said border: none but I can see a little shadow of it. See screenshot below and put on some glasses because it's barely noticeable. Still bugs me very much. I've looked through my stylesheet and can't find any shadow setting for inputs so unsure how to fix this.
HTML:
<div id="SearchForm" style="width: 120px; height: 29px; position: relative; top: 16px; right: 17px; padding-left: 20px;">
<form action="%%GLOBAL_ShopPath%%/search.php" method="get" onsubmit="return check_small_search_form()">
<span class="add-on" style="position: absolute; top: 6px; right: 4px;"><i class="icon-search"></i></span>
<input type="text" class="input-small" name="search_query" id="search_query" placeholder="Search..." value="%%GLOBAL_OriginalSearchQuery%%" title="Search" />
<input type="submit" value="" name="Search" title="Search" style="position: absolute; top: 2px; right: 0; background: transparent; border: none; width: 35px; height: 22px;" />
</form>
</div>
CSS:
input[type="submit"] {
cursor: pointer;
-webkit-appearance:none;
}
Afzaal Ahmad Zeeshan
That is I guess border-top of the button, or the button is not totally hidden. So you can try this out:
<input type="submit" />
And then use CSS to change the image, to the background-image for the submit button. So when you will click the form will be submitted!
input[type="submit"] {
/* here, you can change the background-image
* background-image: url('../link/to/file.png');
*/
}
If you really wanna get rid of it, then remove the above image, and use it as the background-image of the button. This way you won't have to worry about the button.
You can hide the button using:
input[type="submit"] {
opacity:0.0;
filter:alpha(opacity=00); // for ie..
}
Also, if you provided a link to the website then we might have noticed what was causing the issue, or just the source code.
Collected from the Internet
Please contact [email protected] to delete if infringement.
edited at
- Prev: Encapsulating chrome API operations into a functions
- Next: #1357 - Can't drop or alter a PROCEDURE from within another stored routine
Related
Related Related
- 1
How to remove button shadow (android)
- 2
Removing default shadow from search box
- 3
Android L FAB Button shadow
- 4
Button with pointed edges and shadow
- 5
Drop and Inner shadow for button in javafx
- 6
how to create a button with shadow
- 7
Remove shadow effect on android button
- 8
No shadow, no outline, no border on active button
- 9
Removing the shadow from a button
- 10
Stripe connect button not showing bottom shadow
- 11
Remove button shadow in java (Android)
- 12
Android elevation not showing shadow on Button
- 13
iOS Button with round corners and a shadow
- 14
How to remove the shadow of a button on Xamarin Forms
- 15
Remove Button Shadow
- 16
Android elevation not showing shadow on Button
- 17
jquery mobile button text shadow
- 18
Button with pointed edges and shadow
- 19
Display only the shadow to a button in HTML?
- 20
Removing shadow from button WPF
- 21
Android button shadow/margin top
- 22
Drop shadow for Floating Action Button
- 23
How to create Shadow on Android Button (Material Design)
- 24
HTML submit button shadow border issue
- 25
CSS Button shadow?
- 26
Material Design Button without Shadow
- 27
How to give shadow in a button like this?
- 28
bootstrap button circle shadow issue
- 29
How to get rid right side shadow but maintain bottom shadow on button
Comments