blocks|key|2234466|text|您需要移除边框(倒角)，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2234467|input+{
++++border:+0;
}|code-block|syntax|javascript|2234468|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You will need to remove the border (bevel) like so:

<pre><code>input {
 border: 0;
}
</code></pre>

blocks|key|2234473|text|您可以在CSS中设置边框属性。我总是在想|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2234474|++border:+1px+solid+black;|code-block|syntax|javascript|2234475|看起来不错。|2234476|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

You can set border attributes in CSS. I always think

<pre><code> border: 1px solid black;
</code></pre>

looks nice.

blocks|key|1735150|text|我不建议更改按钮的外观，因为它与网站上其他按钮的外观不一致，用户很难找到并识别为提交按钮。如果你真的想继续下去，我强烈建议你做一个可用性测试。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1735151|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

I would not recommend changing the appearance of the button because it will not be consistent with the way other buttons on websites look and will be harder for users to find and recognize as a submit button. If you really want to go ahead, I strongly recommend doing a usability test.

blocks|key|4346485|text|如果你想使用你自己的按钮图像，那么你需要定义你自己的按钮，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4346486|<div+class="button">
++<a+href="#">Login</a>
</div>|code-block|syntax|javascript|4346487|和CSS：|4346488|div.button
{
++++position:+relative;
++++display:+block;
++++float:+left;
++++margin:+0;
++++border:+0;
++++padding:+0;
++++background:+url(button_right_normal.gif)+no-repeat+right+top;
}

div.button+a
{
++++position:+relative;
++++display:+block;
++++margin:+0;
++++border:+0;
++++padding:+2px+15px+5px+15px;
++++height:+18px;
++++background:+url(button_left_normal.gif)+no-repeat+left+top;
++++color:+#ffffff;
++++font-size:+11px;
++++text-decoration:+none;
}|4346489|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

If you want to use your own button image, then you will need to define your own buttons, like this:

<pre><code>&lt;div class="button"&gt;
 &lt;a href="#"&gt;Login&lt;/a&gt;
&lt;/div&gt;
</code></pre>

And the CSS:

<pre><code>div.button
{
 position: relative;
 display: block;
 float: left;
 margin: 0;
 border: 0;
 padding: 0;
 background: url(button_right_normal.gif) no-repeat right top;
}

div.button a
{
 position: relative;
 display: block;
 margin: 0;
 border: 0;
 padding: 2px 15px 5px 15px;
 height: 18px;
 background: url(button_left_normal.gif) no-repeat left top;
 color: #ffffff;
 font-size: 11px;
 text-decoration: none;
}
</code></pre>

blocks|key|1737196|text|可以使用边框CSS属性删除边框。例如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1737197|<input+type=button+value="Hello"+style="border:0">|code-block|syntax|javascript|1737198|(当然，您可以将其移动到样式表中。)|1737199|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

You can remove the border using the border CSS properties. For example:

<pre><code>&lt;input type=button value="Hello" style="border:0"&gt;
</code></pre>

(You can of course move this into your stylesheet.)

blocks|key|2234629|text|你可以使用任何img作为背景(例如透明圆角)，只需在css中添加"background-color:+transparent；|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2234630|HTML(标准的“提交”按钮)-没什么特别的(我不喜欢把代码和样式混在一起)：|2234631|<input+type="submit"+name="submit"+id="mystyle"+value="send+e-mail"/>|code-block|syntax|javascript|2234632|然后在css中(除了删除边框和默认背景外，与普通链接相同)|2234633|#mystyle+{
background-color:+transparent;
border-top-style:+none;
border-right-style:+none;
border-bottom-style:+none;
border-left-style:+none;
}|2234634|没有像官方的提交按钮那样的CSS，有你设计的CSS。|2234635|测试:+Chrome、IE、Opera|2234636|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

You can use ANY img as background(for example transparent rounded corners), just in the css add "background-color: transparent;"

HTML(standard offical "submit" button) - nothing special(I don't like mixing code with style):

<pre><code>&lt;input type="submit" name="submit" id="mystyle" value="send e-mail"/&gt;
</code></pre>

then in css(same as a normal link except kill borders, and default background)

<pre><code>#mystyle {
background-color: transparent;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
</code></pre>

Without CSS like the offical submit button, with CSS whatever you designed.

Tested: Chrome, IE, Opera

blocks|key|2234656|text|我在输入按钮上也遇到了同样的问题。这一次，IE8看起来像是我想要的“开箱即用”，而它是Chrome令人失望的！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2234657|为我做到这一点的CSS是：|2234658|input[type="button"]+{
++++border:+0;
++++border-width:+2px;
++++border-color:+white;
++++border-style:+solid;
}|code-block|syntax|javascript|2234659|边框:+0；删除3D倒角(边框样式)，然后我用一个扁平的边框来代替它，这个边框在IE8和Chrome中都能很好地渲染。|2234660|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

I was having the same problem on input buttons. For once IE8 was appearing like I wanted "out-of-the-box" and it was Chrome that disappointed!

The CSS that did the trick for me was:

<pre><code>input[type="button"] {
 border: 0;
 border-width: 2px;
 border-color: white;
 border-style: solid;
}
</code></pre>

border: 0; removes the 3D bevel (border style), then I replace it with a flat looking border which renders nicely in both IE8 and Chrome.

blocks|key|1735225|text|我正在寻找答案，看到了这一点，并决定在我找到解决方案后参与其中。下面的所有答案都是正确和有帮助的，直到一个小的灰色边框仍然可见。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1735226|没有人提到:背景-大小:封面；|1735227|去掉了按钮上的最后一点灰色。|1735228|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

I was looking for the answer, saw this and decided to weigh in after I figured out the fix. All the answers below are correct and helpful up to the point that a small grey border is still visible.

No one mentioned: background-size: cover;

Which removed the final bit of grey from the button.

blocks|key|2234552|text|您可以将类似以下内容添加到样式表中(或在页面上的<style>...</style>标签中)，并使用一些高级CSS选择器：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2234553|input[type=submit],+input[type=button],+/*+Advanced+CSS+selectors+*/
input.button+/*+For+older+browsers+you+can+add+a+'button'+class+to+each+button+where+you+want+a+bkg+img+*/
{
++border:+0;
++background-image:+url("/images/foo.png");
}|code-block|syntax|javascript|2234554|entityMap^0|O|I|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

You can something like the following to a stylesheet (or within at <code>&lt;style&gt;...&lt;/style&gt;</code> tag on the page) and use some advanced CSS selectors:

<pre><code>input[type=submit], input[type=button], /* Advanced CSS selectors */
input.button /* For older browsers you can add a 'button' class to each button where you want a bkg img */
{
 border: 0;
 background-image: url("/images/foo.png");
}
</code></pre>

blocks|key|2234580|text|请注意，Safari在样式提交按钮方面非常顽固。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2234581|<button+type="submit"></button>|code-block|syntax|javascript|2234582|更加灵活。但是，如果在一个表单中使用多个按钮，IE6就会出现问题。IE还会提交innerHTML元素的按钮，而Firefox会提交value属性(这对我来说更有意义)。|offset|length|style|CODE|2234583|entityMap^0|0|0|13|9|1T|5|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]|$I|T|J|U|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|N|$]]

Note that Safari is very stubborn with styling submit buttons.

<pre><code>&lt;button type="submit"&gt;&lt;/button&gt;
</code></pre>

Is more flexible. However, if you're using multiple buttons in a form, IE6 has problems. IE also submits the <code>innerHTML</code> of the button element, whilst Firefox submits the <code>value</code> attribute (which makes more sense to me).

blocks|key|5763617|text|我认为您可以指定按钮和提交按钮的外观：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5763618|input[type=button],+input[type=submit]+{+border:+0+}|code-block|syntax|javascript|5763619|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

i think you can specify how the button and submit button look like:

<pre><code>input[type=button], input[type=submit] { border: 0 }
</code></pre>

I am trying to get rid of the default bevel and border that most browsers/OS have set as the default on Submit buttons. When I use CSS to add a background image it just displays the image in the background of the button but the bevel is still there. Is there a way to make the button just display just my image? Is the only way to do that to set the image path in the src tag of the html input element?

Submit button has bevel I cant get rid of

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我正在尝试摆脱默认的斜角和边框，大多数浏览器/OS都将其设置为提交按钮的默认设置。当我使用CSS添加背景图像时，它只是在按钮的背景中显示图像，但斜角仍然在那里。有没有办法让按钮只显示我的图片？唯一的方法是在html input元素的src标记中设置图像路径吗？

问提交按钮有斜面，我无法摆脱
EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问提交按钮有斜面，我无法摆脱EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问提交按钮有斜面，我无法摆脱
EN