I'm using asp.net ImageButton and it looks like:
I want to remove that blue border.
I have tried
border: 0px;
border-style:none;
But same result.. How can I solve that?
I'm using that for voting system and I want to execute some server side code on this button click
Assuming that the border is NOT part of the image. This is what you can try:
border:none;
outline:none
append the !important declaration just in case there is some overriding your styles
Example
<asp:ImageButton ID="btnLike" runat="server" style="border:none !important;outline:none !important" .../>
Update based on comment
Since you are setting the image as a background image (dunnot why since you're already using an ImageButton) make sure that the background of your button has no color...background-color: transparent
If you are setting your image as a CSS background, this issue may solvable by setting the image via URL.
Create class like this and choose your image to show on button. include class in button. see below :
Css Style :
.btn {border:none; background:url(image/loader.gif); }
Your Button Code :
<input type="button" value="Submit" class="btn" />
try this , in CSS file
border: 0px solid transparent;
outline: transparent solid 0px;
Related
Is there a way I can change the appearance of a TextBox from its default look to look like this
I searched for creating a custom TextBox but didnt see anything about changing how it looked.
I have the have the image in a PSD i just didnt know if there was a way to replace the default look with this image
I am new to making websites and just using this for learning purposes so I dont really know where to start
You should use CSS to achieve this. What you need to do is to style it. Here are some nice examples that could help you.
Here is the one that shows how to add background image:
.tb11 {
background:#FFFFFF url(images/search.png) no-repeat 4px 4px;
padding:4px 4px 4px 22px;
border:1px solid #CCCCCC;
width:230px;
height:18px;
}
You can create a custom asp.net text box control and wrap oob asp.net text box with necessary html (a label or span) and css to style it like the way you want. That control will become reusable and you would be able to use it on any of your pages.
If you want an easy way to do it, just load easy to use bootstrap framework and include the needed file to your project.
Than just add the right class to your control and here it is !
Also, the docs is really complete and simple
http://getbootstrap.com/components/#input-groups
An asp.net TextBox is really just an input with the type="text".
You can do something like this using stylesheets:
CSS:
input[type=text].styled1
{
background: url(http://myUrl.com/Username.jpg);
border:0;
color: gray;
height: 23px;
padding-left:10px;
width: 200px;
}
XHTML:
<asp:Textbox id="txtUsername" runat="server" CssClass="styled1" />
I have an ASP.NET text box. I am trying to set the color of the border to green when the textbox gains focus, and I want to be specific about the class of the textbox. The text box looks like this -
<asp:TextBox CssClass="myInput" BorderStyle="None" runat="server">Search</asp:TextBox>
NOTE: I have BorderStyle="None" to start with, because when the textbox does not have focus, I want no border showing. Currently a border is shown on focusing, but it's not the color I want.
I have tried the following in my CSS file -
.myInput:focus {
border: green;
}
and
input.myInput:focus {
border: green;
}
(and a few others) but nothing has worked. Can someone please tell me how it can be done?
Thanks!
Yep, you need to remove the BorderStyle="None" from your TextBox control.
Set the border style for this in CSS, then you can use the focus
Have a look at this http://jsfiddle.net/xXEWK/
you can't see the textbox at first - click just to the right of where you see 'Textbox ->'
Have a look this
Instead of border: green you need to use border: 1px solid green;
And your text box should be like this
<asp:TextBox CssClass="myInput" runat="server">Search</asp:TextBox>
Update
I think then its better to use jQuery.
You can add a class on foucus and remove the class when out focus
See more about focus and focusOut
See this sample
I had to use -
.myInput:focus {
border:solid 1px green !important;
}
Because the border style was being overridden by other CSS settings.
you can use like this
<asp:TextBox ID="txtSearch" CSSClass="myInput" runat="server">Search</asp:TextBox>
I followed the details in the link for creating a image gallery.
And that approach works fine for me.
I want to change the mouse hover event to a click event so that when a thumbnail is clicked (instead of hover), its open image in large area.
Something like this:
http://jsfiddle.net/VfNdE/61/
The old hover classes become focus:
.thumbnail:focus{
background-color: transparent;
outline:none;
}
.thumbnail:focus img{
border: 1px solid blue;
}
and the old html simply has tabindex added like follows for each anchor:
<a class="thumbnail" href="#thumb" tabindex="1">
I'm new to CSS and I'm trying to add a background image to a button. I have a simple input button that I'm using as a toggle for displaying a div. I want to put an image in the button. I'm using the following HTML.
<input type='button' id='toggleButton'>
When I view this in my web page in Firefox 9.0.1 it looks great:
I applied the following style to it to add my image:
#toggleButton {
background-image: url("plus.png");
background-repeat: no-repeat;
background-position: center;
}
As soon as I apply the background image the button becomes very plain:
I used Firebug to examine the computed style of both buttons and it didn't show any difference other than the style I appled and some minor changes in border width (from 2.5px to 1.66667px). I added border-width: 2.5px; to the style and it didn't help.
My image has an alpha channel and only the black of the plus sign should show. My understanding of CSS is that the original button's style should still be applied and my button only adds the background image. I expected to end up with a button that looks approximately like this:
How do I add the background image and keep the fancy button look?
How about try something like this if you just want to add a plus symbol:
Html:
<input type='button' id='toggleButton' value="+" />
CSS:
#toggleButton {
font-family: Helvetica, Arial;
font-weight: bold;
font-size: 14px;
vertical-align: middle;
text-align: center;
padding: 3px;
color: #444444;
}
Please try making your button picture to circular bead.
I have a button like so:
<button>Click Me</button>
I want to make that button linked with an href. Is it compliant HTML to wrap the button in a tag or to put the tag inside of the button to make it linkable?
Thanks
You may just want to use a link itself and style it like a button. You can still add an onclick, but it makes linking to a new page really easy.
a.button{
color: #000000;
text-decoration: none;
display: block;
background: #FFFFFF;
border: solid 1px black;
}
A less appealing (though commonly used) method is to wrap a link around an image.
<img src="/images/button.png"/>
I think the correct way would be to put the button in a form, and set the form's action attribute to the page you want to link to and the button's type attribute to submit.
e.g.
<form action="nextpage.html" method="get">
<button type="submit"> Next </button>
</form>