CODEWITHSUNDEEP
htmlcssgoogle-chromebuttonhyperlink
Mikhail Geyer
Mikhail Geyer

Reputation: 1171

border style of href link button is not displayed in chrome

A border style of href link button is not displayed in Chrome browser. Here is the code of this issue:

.link_button
{
	-webkit-appearance: button;
	-moz-appearance: button;
	appearance: button;
}

input[type=submit], .link_button
{
	text-decoration: none;
	padding: 1px 6px;
	border: 10px solid red;
	color: #000000;		
	background-color: #DDDDDD;
}
<p>
<a href="loaddata/" class="link_button">Go back for a new text</a>
</p>

<form action="loaddata/" method=get>
	<input type="submit" value="Go back for a new text">
</form>

Here is how Chrome browser (v.47) renders this code:

enter image description here

As seen there is no solid red borders around the href link button. The input button has these bordres.

At the same time, Firefox (v.42) renders the same code with solid red borders for the both types of buttons:

enter image description here

The question is why Chrome does not produce the borders in the case of a href link button? How it could be fixed?

Upvotes: 2

Views: 1539

Answers (3)

Mohit
Mohit

Reputation: 522

Please try this it works perfectly fine for you, 

a
{
color: #000000; 
background-color: #DDDDDD; 
border: 10px solid red;
padding: 1px 6px;
}

input[type=submit]
{
text-decoration: none;
padding: 1px 6px;
border: 10px solid red;
color: #000000; 
background-color: #DDDDDD;
}

HTML code goes like this:

<body>
<p>
<a href="loaddata/" >Go back for a new text</a>
</p>

<form action="loaddata/" method=get>
<input type="submit" value="Go back for a new text">
</form>
</body>

Any further help needed please comment. Feedback much appreciated.

Upvotes: 1

Tom O&#39;Leary
Tom O&#39;Leary

Reputation: 31

The appearance property is designed to render elements as browser native elements. When using Google Chrome, they set button borders to 2px outset buttonface. This cannot be overidden when using the appearance property.

However, to achieve a red border around .link_button use:

box-shadow: 0px 0px 0px 10px red;

instead of border: 10px solid red;

Upvotes: 1

satya
satya

Reputation: 1185

Please try this:

Instead of border use outline:

input[type=submit], .link_button
{
    text-decoration: none;
    padding: 1px 6px;
    outline: 10px solid red;
    color: #000000;     
    background-color: #DDDDDD;
}

Upvotes: 0

Related Questions