All geek questions in one place

Css submit button / href cross browser

I want my submit buttons + links to appear as buttons and the same in all browsers.

Firefox 3.5 plays well. But IE6,7,8 have different views. Can you help me with this (apparently) simple task?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>Crossbrowser css submit button, links</title>
    <style type="text/css">
        button {
            background:#FFE900;
            color:#000;
            padding:3px 5px 3px 5px;
            border:1px solid #000;
        }
        input {
            background:#FFE900;
            color:#000;
            padding:3px 5px 3px 5px;
            border:1px solid #000;
        }
        a {
            background:#FFE900;
            color:#000;
            padding:3px 5px 3px 5px;
            border:1px solid #000;
            text-decoration:none;
        }
    </style>
</head>
<body>
<a href="#">Buy now</a>
<input type="submit" value="Buy now" />
<button type="submit">Buy now</button>
</body>
</html>
+3
source share
6 answers

You can replace the Submit button with an image just like you do, with a background image for the link. Just get rid of the background and border, put the background url in the input selector and give it the correct width and height.

input{
    background-color: white;
    border: 0;
    background-image: url('blah.png');
}
+2
source

For buttons instead type="submit"use type="image".

For example:

<button type="image" src="path_to_your_image.png">Buy now</button>

css :

background-image: url('path_to_your_image.png');
+1

, , , Firefox 3.5 .

, . , - ( "" ), URL-, , , , .

IE6 7 .

CSS (<button> <input>):

overflow: visible;

IE6/7, - , visible . - , , , IE6 IE7.

CSS . , , :

display: inline-block;
+1

, , - . , ( , ), , . , . , , , , . ( , , firefox .) , -. , .

+1

If you need a consistent look, you need to use the send image button.

0
source

You can always use the JavaScript framework to replace an element with a more stylish one or use MSIE conditional comments for a browser-specific style.

The sad truth is that cross-browser pixel perfection seems impossible with pure CSS and buttons.

0
source

Source: https://habr.com/ru/post/1712943/

More articles:


All Articles