Trying to remove border around PayPal input in Chrome

Question

I'm trying to remove this border around my PayPal input as well as center align the text.

It works fine in Firefox but bugs in Chrome.

Here's a link to what I'm working on.

I've tried this focus fix, but no luck.

textarea:focus, input:focus{
outline: 0;}

I have been trying to fix this for a while now and any help would be appreciated. Thank you!

Possible duplicate of http://stackoverflow.com/questions/10542868/chrome-border-issue — Suresh Ponnukalai, Jul 01 '14 at 06:52

Joe · Accepted Answer · 2014-07-01T06:52:23.720

0

Are you able to change the HTML markup of the input type to button ? Doesn't seem like you are using it as an image anyways.

<button type="submit" class="button_fix">Order Now</button>

Since you are trying to align your text to the center, remove the padding from the right and left and apply text-align:center; Here is an updated fiddle:

http://jsfiddle.net/DL6QU/7/

edited Jul 01 '14 at 06:52

answered Jul 01 '14 at 06:27

Joe

5,955
2
29
42

I can change the input to button, but it doesn't link to the right PayPal page. Is there a way I can get the button to still link properly? – user3640511 Jul 01 '14 at 06:31
Updated answer with new fiddle, use the button element with type="submit" – Joe Jul 01 '14 at 06:40
Also added a CSS rule at the bottom to allow the mouse to become a hand when hovering over the button. – Joe Jul 01 '14 at 06:42

score 0 · Answer 2 · answered Jul 01 '14 at 06:34

Try to use like this: DEMO

HTML:

<input type="submit" class="button_fix" name="submit" value="Order Now">

CSS:

.button_fix {    
    display:block;
    background-color:#c0392b;
    text-align:center;
    width:200px;
    padding:10px 35px;
    color:#fff;
    /* Safari 3-4, iOS 1-3.2, Android 1.6- */
    -webkit-border-radius: 8px; 
    /* Firefox 1-3.6 */
    -moz-border-radius: 8px; 
    /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
    border-radius: 8px; 
    font-size:2em;
    font-weight:200;
    font-family: Helvetica, sans-serif;
    margin:10px auto 0px auto;
    outline:none;
    border:0;
}

Hope this helps

Trying to remove border around PayPal input in Chrome

2 Answers2