Remove border from alt text above image
I am trying to remove border from alt tag text. I am using a transparent image for a button on a PayPal form linked via css. The paypal button takes the alt tag as the button text and puts a border around it. I don't understand why this is happening, but this is what I have to work with with PayPal. Apparently I should be using an image. This way I am using a transparent image so I can create it in css to look like my other buttons rather than trying to get screenshots of each button state.
I have paired the code to only focus on the border around the View Cart text.
CSS
//link to my transparent button with no text on it
#vyc {
background-image: url(http://lakenney.com/kenney_lucille-final/images/vyc.png) no-repeat;
}
//the user agent that is controlling the outer border
user agent stylesheetinput[type="hidden" i], input[type="image" i], input[type="file" i] {
-webkit-appearance: initial;
padding: 20px;
background-color: initial;
border: dotted;
border-top-color: red;
}
//a couple of tags I'm using to try to access the alt tag border not working
#vyc img[alt] {
/*border: 1px dashed #3D8EA5;*/
border: transparent !important;
}
input#vyc img[alt] {
border: transparent !important;
}
Html
Here is a jsfiddle link to the same code: http://jsfiddle.net/lakenney/w0zpmutn/
source to share
You can use a transparent image as a source to get rid of the border, but then you have no alt text, but you can overlay some text.
document.querySelector('#input1').onfocus = function() {
console.log('clicked');
this.blur();
}
label {
position: relative;
width: 100px;
display: inline-block;
line-height: 3rem;
height: 3rem;
background: blue;
border: 0;
border-radius: 5px;
}
input {
width: 100px;
height: 100%;
}
.overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-align: center;
color: #FFF;
text-decoration: none;
}
<label for="input1">
<input id="input1" type="image" src="http://upload.wikimedia.org/wikipedia/commons/c/ce/Transparent.gif" />
<a class="overlay" href="#input1">
Some Text
</a>
</label>
But the form action won't work anymore. so you will need to submit the form / redirect the page using javascript.
source to share
Input (type = "image") expects a src image that is missing and therefore a border. Is it possible to set a transparent image as the src value?
<input type="image" src="http://lakenney.com/kenney_lucille-final/images/vyc.png" id="vyc" border="0" name="submit" value="View Cart" alt="View Cart">
source to share