4

所以我有一个带有此代码的提交按钮：

<form method="post">
    <input name="submit" type="submit" class="icon" value=" "/>
</form>

在我的 CSS 中：

.icon{
    background-color:transparent;
    background-image:url(http://www.lcda.fr/pneu-expo/images/drapeau_rond_gb-on.png);
    height:20px;
    width: 20px;
    background-position:center;
    border:none;
    cursor:pointer;
    background-size: 100%;
}

但问题是图像（具有h：40px和w：40px）不会缩小以适应20px按钮......你们有什么解决方案吗？（如果可能，我宁愿不使用 javascript）

编辑：目前正在工作。我只是删除历史，现金，它的工作原理...... ty

4

7 回答 7

3

改用图像提交按钮，并使用 CSS 将元素缩小到所需的尺寸。

<input name="submit" type="image" class="icon"
style="width: 20px; height: 20px"
src="http://www.lcda.fr/pneu-expo/images/drapeau_rond_gb-on.png"
alt="Send" />
于 2013-06-05T08:37:21.637 回答
3

尝试这个 ： -

background-size:20px 20px;
于 2013-06-05T08:26:47.240 回答
1

您可以简单地使用图像类型的输入，它正是为此目的而存在的：提交显示图像的按钮。作为奖励，您还将获得用户单击的坐标。

例子：

<input name="mysubmit" type="image" src="http://www.lcda.fr/pneu-expo/images/drapeau_rond_gb-on.png" />

现场测试用例。

只有一个缺点：在处理表单的服务器端代码中，您必须检查“mysubmit.x”和/或“mysubmit.y”是否不为空才能知道您是否收到了任何发送的内容，这比仅检查更直观“我的提交”。

于 2013-06-05T08:37:16.217 回答
1

为按钮添加一个 id，更新图像：

document.body.onclick=function(e){
    debugger;
    var bid=document.getElementById('bid');
    bid.style.backgroundImage="url('http://www.google.co.il/images/srpr/logo4w.png')";;
}

js在这里摆弄。

于 2013-06-05T08:28:47.523 回答
1

在 css 文件中添加这一行：

display:block;
于 2013-06-05T08:30:26.873 回答
1

您需要包装一个跨度来提交按钮并为其设置样式。

演示http://jsfiddle.net/H5dmd/2/

HTML

<form method="post">
    <span class="icon">
        <input name="submit" type="submit" value=" "/>
    </span>
</form>

CSS

input[type=submit]{
    background:transparent;
    width:20px;
    height:20px;
    border:none;
    padding:none;
    cursor:pointer;
}
.icon{
    float:left;
    background-color:transparent;
    background-image:url(http://www.lcda.fr/pneu-expo/images/drapeau_rond_gb-on.png);
    height:20px;
    width: 20px;
    background-position:center;
    border:none;
    cursor:pointer;
    background-size: 100%;        
}
于 2013-06-05T08:31:08.080 回答
0

我在这里看到多个选项：

零钱保存

将图像保存为 20x20，哎呀，问题消失了。

使用 CSS3

CSS3 引入了一个新特性，即背景大小

把它放在你的 CSS 中：

background-size: 20px 20px;

但它不会与旧浏览器兼容。

使用 JavaScript [坏风格]

HTML

<form method="POST" action="test.php" name="myform">
    <a onclick="javascript:document.forms['myform'].submit ();" ><img src="myimage.png" onclick="submit();" /></a>
</form>
于 2013-06-05T08:39:25.873 回答