Databases
StackOverflow2013
Postsdbo
POchanging button tag border color
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POchanging button tag border color
    text
    copied!<p>I have put an image in border-less <code>button</code> tag. When the button is selected with <kbd>Tab</kbd>, 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.</p> <p>HTML</p> <pre><code>&lt;td align=center valign=middle&gt; &lt;figure&gt; &lt;button style="background-color:black; height:160px;width:160px ; border:none"&gt; &lt;img src="F:\rashmi\icons_tv\Help_Normal.png"&gt; &lt;/button&gt; &lt;figcaption&gt;&lt;font size="5" color="white" style="font-weight:bold"&gt;&lt;center&gt;help&lt;/center&gt;&lt;/font&gt; &lt;/figcaption&gt; &lt;/figure&gt; &lt;/td&gt; </code></pre> <p><strong>EDIT:</strong></p> <p><img src="https://i.stack.imgur.com/a9ERx.png" alt=""></p> <p>I can change highlight color by using <code>style=outline-color:white</code></p> <p>HTML</p> <pre><code>&lt;html&gt; &lt;body&gt; &lt;tr&gt; &lt;td align=center valign=middle&gt; &lt;figure&gt; &lt;button style="background-color:black; height:160px;width:160px ; border:none;outline-color:white;"&gt; &lt;img src="F:\rashmi\icons_tv\Help_Normal.png"&gt; &lt;/button&gt; &lt;figcaption&gt;&lt;font size="5" color="white" style="font-weight:bold"&gt;&lt;center&gt;help&lt;/center&gt;&lt;/font&gt; &lt;/figcaption&gt; &lt;/figure&gt; &lt;/td&gt; &lt;td align=center valign=middle&gt; &lt;figure&gt; &lt;button style="background-color:black; height:160px;width:160px ; border:none;outline-color:white;"&gt; &lt;img src="F:\rashmi\icons_tv\Help_Normal.png"&gt; &lt;/button&gt; &lt;figcaption&gt;&lt;font size="5" color="white" style="font-weight:bold"&gt;&lt;center&gt;help&lt;/center&gt;&lt;/font&gt; &lt;/figcaption&gt; &lt;/figure&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><img src="https://i.stack.imgur.com/hXHsl.png" alt=""></p> <p>Here is my initial page load image and if I press <kbd>Tab</kbd> I get a highlight similar to what is shown</p> <p><img src="https://i.stack.imgur.com/UOSpA.png" alt=""> </p> <p>How do I increase the rectangle width.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload