changing button tag border color
37,229
<input type="button"
value="Button with border"
style="color: #07c;
border: 2px solid #07c;
padding: 2px 5px;" />
Visit this link for more details.
Related videos on Youtube
Author by
rashmi
Updated on March 10, 2020Comments
-
rashmi about 4 years
I have put an image in border-less
button
tag. When the button is selected with Tab, a brown border appears around the image. How do I change color of that rectangle from brown to white. Is is possible to have a white rectangle with inner and outer shadow of blue.HTML
<td align=center valign=middle> <figure> <button style="background-color:black; height:160px;width:160px ; border:none"> <img src="F:\rashmi\icons_tv\Help_Normal.png"> </button> <figcaption><font size="5" color="white" style="font-weight:bold"><center>help</center></font> </figcaption> </figure> </td>
EDIT:
I can change highlight color by using
style=outline-color:white
HTML
<html> <body> <tr> <td align=center valign=middle> <figure> <button style="background-color:black; height:160px;width:160px ; border:none;outline-color:white;"> <img src="F:\rashmi\icons_tv\Help_Normal.png"> </button> <figcaption><font size="5" color="white" style="font-weight:bold"><center>help</center></font> </figcaption> </figure> </td> <td align=center valign=middle> <figure> <button style="background-color:black; height:160px;width:160px ; border:none;outline-color:white;"> <img src="F:\rashmi\icons_tv\Help_Normal.png"> </button> <figcaption><font size="5" color="white" style="font-weight:bold"><center>help</center></font> </figcaption> </figure> </td> </tr> </body> </html>
Here is my initial page load image and if I press Tab I get a highlight similar to what is shown
How do I increase the rectangle width.
-
rashmi about 13 yearsyou mean to say i have to replace <button style="background-color:black; height:160px;width:160px ; border:none"><img src="F:\rashmi\icons_tv\Help_Normal.png" > </button> with <input type="button" value="Button with border" style="color: #07c; border: 2px solid #07c; padding: 2px 5px;" />
-
rashmi about 13 yearsthanks for your reply. i just checked with code you had given me to try you know what happens. initially i get blue rectangle when i select image using tab key i get white inner and outer lines with blue rectangle. i wanted something like this...... i dont want any border to be seen initially when image is selected i want rectangle with shadow effect as i mentioned. hope i am clear
-
Sandy about 13 yearsI have added a link. visit it, I hope you will get the answer.
-
rashmi about 13 yearsthank you so much sandy. i didnt notice anyways i will try that and get back to you
-
rashmi about 13 yearshey sandy as i had mentioned i could change highlight color to white using this property style="outline-color:white;" but i am not able to change width of highlight. if i use outline-width property it draws rectangle around image initially when page loads which i dont want. i want rectangle to be seen only when i give focus to button using tab key. how do i achieve this. please help me
-
Sandy about 13 yearsCan you post your updated code? You can online put code here jsfiddle.net/jAxg9
-
rashmi about 13 years<td align=center valign=middle > <figure> <button style="background-color:black; height:160px;width:160px ; border:none;outline-color:white;"><img src="F:\rashmi\icons_tv\Help_Normal.png" onfocus="zoom('57px','120px','96px','136px',this);" onblur="zoom('57px','120px','57px','120px',this);" > </button> <figcaption><font size="5" color="white" style="font-weight:bold"><center>help</center></font></figcaption> </figure> copy this code twice inside body tag so that you get exact idea what i meant. when you move between buttons using tab key you get white rectangle.
-
Sandy about 13 yearsActually i dont have your image. So can you add your image also?
-
rashmi about 13 yearshow do i add image???? sorry to ask you such question but i didnt find any way to attach image.
-
Sandy about 13 yearsClick on edit to ur ques. And click to image on toolbar for uploading the image.
-
rashmi about 13 yearsi cant upload image as i dont have reputation more than 10. :( wat to do ?
-
rashmi about 13 yearstake some image just for testing na.just take 2 buttons with some image loaded as i have mentioned before. try using tab key to focus u can see white highlight. i think with out image also you can test. im sorry
-
rashmi about 13 yearssandy i am confused now..... my question was how do i change width of highlight rectangle(white rectangle appears around image when tab key pressed) but you code prints alert message when image is clicked.
-
Sandy about 13 yearsUse border:None 8px; You can use any value in place of 8px. And border style None or Solid n other styles.
-
rashmi about 13 yearssetting border:8px as no effect if i set border-width:8px it will display border around image and when i use tab key to select that button i get white rectangle around border. my requirement is i dont want border but i want thick highlight rectangle by default it takes value 1. if i try to set it using outline-width:3px it gives me same effect as one i get using border. hope you got my point
-
Sandy about 13 yearsI am not getting you, what you actually wanna.
-
adweb24.com about 8 years[custom_button text="Small Custom Button" title="Small Custom Button" url="your_link_goes_here..." size="small" bg_color="#FF5C00" text_color="#FFFFFF" align="left" target="_self"]
-
Soubhik Mondal about 8 yearsYou should be more descriptive in your answer, add references and format your code accordingly. Just adding a line of code isn't sufficient.