V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member  Sign In
Nagisa1992
V2EX  ›  问与答

input submit 按钮在 ios 浏览器上的圆角该怎么去除?

  •  
  •   Nagisa1992 · Nov 10, 2016 · 2365 views
    This topic created in 3463 days ago, the information mentioned may be changed or developed.
    <form id="search-form" action="/s" method="get" name="keywords">
        <span class="input-area"><input type="text" id="sh-text" name="kw"></span>
        <span class="input-submit"><input type="submit" id="sh-sub" value="GO"></span>
    </form>
    

    这样的话在桌面和 android 手机都没问题,就是在 iphone/itouch 的 safari 和 chrome 浏览器中,都会出现矩形的 submit 按钮有一个圆角的问题,无法去除。按照 so 搜到的结果改了 css 如下 css:

     @media (max-width: 767px){
                .input-submit{
                    width: 15%;
                    border-radius: 0;
                    -webkit-appearance : none;
                    -webkit-border-radius:0px;
                 }
    
            }
    

    依然不生效,请教一下该如何处理?

    7 replies    2016-11-10 16:38:42 +08:00
    ferrum
        1
    ferrum  
       Nov 10, 2016
    不记得有什么样的圆角,截个图看看?
    Nagisa1992
        2
    Nagisa1992  
    OP
       Nov 10, 2016
    @ferrum ![QQ 截图 20161110155656.png]( https://ooo.0o0.ooo/2016/11/10/582428762939e.png)
    jwk345
        3
    jwk345  
       Nov 10, 2016 via iPhone
    有所谓吗?
    Nagisa1992
        4
    Nagisa1992  
    OP
       Nov 10, 2016
    @jamesxu 老板要求,没办法。。
    yunying
        5
    yunying  
       Nov 10, 2016
    ...safari 的默认样式应该是定义在 input type="submit"这个标签。。。你却把样式写到了外层的 span 。。。
    ferrum
        6
    ferrum  
       Nov 10, 2016
    其实 input[type=submit]改成 button 元素也一样的。
    Nagisa1992
        7
    Nagisa1992  
    OP
       Nov 10, 2016
    @yunying 原来是这个。。。谢谢!!!
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   2694 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 40ms · UTC 10:14 · PVG 18:14 · LAX 03:14 · JFK 06:14
    ♥ Do have faith in what you're doing.