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.

Share:
37,229

Related videos on Youtube

rashmi
Author by

rashmi

Updated on May 14, 2022

Comments

  • rashmi
    rashmi 15 days

    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
    rashmi over 11 years
    you 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
    rashmi over 11 years
    thanks 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
    Sandy over 11 years
    I have added a link. visit it, I hope you will get the answer.
  • rashmi
    rashmi over 11 years
    thank you so much sandy. i didnt notice anyways i will try that and get back to you
  • rashmi
    rashmi over 11 years
    hey 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
    Sandy over 11 years
    Can you post your updated code? You can online put code here jsfiddle.net/jAxg9
  • rashmi
    rashmi over 11 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></figca‌​ption> </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
    Sandy over 11 years
    Actually i dont have your image. So can you add your image also?
  • rashmi
    rashmi over 11 years
    how do i add image???? sorry to ask you such question but i didnt find any way to attach image.
  • Sandy
    Sandy over 11 years
    Click on edit to ur ques. And click to image on toolbar for uploading the image.
  • rashmi
    rashmi over 11 years
    i cant upload image as i dont have reputation more than 10. :( wat to do ?
  • rashmi
    rashmi over 11 years
    take 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
    rashmi over 11 years
    sandy 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
    Sandy over 11 years
    Use border:None 8px; You can use any value in place of 8px. And border style None or Solid n other styles.
  • rashmi
    rashmi over 11 years
    setting 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
    Sandy over 11 years
    I am not getting you, what you actually wanna.
  • adweb24.com
    adweb24.com about 6 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
    Soubhik Mondal about 6 years
    You should be more descriptive in your answer, add references and format your code accordingly. Just adding a line of code isn't sufficient.