仅删除输入元素上的一个边框,而不影响其他边框 [英] Remove only one border on input element and not effect the other borders

查看:129
本文介绍了仅删除输入元素上的一个边框,而不影响其他边框的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我打算下面的脚本(也位于 http://jsbin.com/enOxEya/1) / )只是为了删除右边框。



但是,对于FF,Chrome和IE, >

此外,对于FF,它删除底部边框,而对于Chrome和IE,它会底部边框。





FF的搜索结果





Chrome的结果





来自IE的结果





使用边框样式无仅限于顶部,底部和左侧边框也会对所有浏览器产生意外结果。



如何只删除单个边框(即右边的那个)而不影响其他三个边界?

 <!DOCTYPE html& 
< html>
< head>
< title>寄宿生< / title>
< style type ='text / css'>
#input2 {border-right-style:none}
< / style>
< / head>
< body>
< input id =input1/>
< br />
< br />
< input id =input2/>
< / body>
< / html>


解决方案

试试这个,效果不错



只需替换

 < style type ='text / css' 
#input2 {border-right-style:none}
< / style>
$ b

 

code>< style type ='text / css'>
#input2 {border-style:solid none solid solid}
< / style>

希望这有助于你。


My intention for the script below (and also located at http://jsbin.com/enOxEya/1/) is just to remove the right border.

For FF, Chrome and IE, however, it makes the left and top border bold.

Furthermore, for FF, it removes the bottom border, and for Chrome and IE, it shades the bottom border.

See images for each browser (all browsers are fairly up to date)

Results from FF

Results from Chrome

Results from IE

Using border style none to just the top, bottom, and left border also produces unexpected results for all browsers.

How do I just remove a single border (i.e. the right one) without effecting the other three borders?

<!DOCTYPE html>
<html>
    <head>
        <title>Boarders</title>
        <style type='text/css'>
            #input2 {border-right-style:none}
        </style>
    </head>
    <body>
        <input id="input1" />
        <br />
        <br />
        <input id="input2" />
    </body>
</html>

解决方案

Try this,it works fine

just replace

<style type='text/css'>
            #input2 {border-right-style:none}
        </style>

with this

<style type='text/css'>
            #input2 {border-style: solid none solid solid}
        </style>

hope this helps you.

这篇关于仅删除输入元素上的一个边框,而不影响其他边框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆