• 技术文章 >web前端 >css教程

    input如何去掉边框

    醉折花枝作酒筹醉折花枝作酒筹2021-04-21 15:21:20原创538

    在css中,可以使用border属性去掉边框,只需要给input元素设置“border:none”样式即可。border属性设置所有的边框属性,当值为none时,表示对标签元素不设置边框属性或者取消边框属性,定义无边框样式。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    新建一个html文件,命名为test.html,在test.html文件内,使用input标签创建一个文本输入框,默认值为空。给input元素添加一个class属性myttpp,用于通过该class设置其css样式。编写<style type="text/css"></style>标签,页面的css样式将写在该标签内。

    <body>
        <input type="text" name="" class="myttpp">
    </body>

    在css标签内,通过class(myttpp)设置input的样式,将border属性定义为none,实现去边框。为了显示效果,同时设置背景颜色为灰色。

    <style>
    .myttpp{
        border: none;
        background: #ccc;
    }
    </style>

    在浏览器打开test.html文件,查看实现的效果。

    }$II$(N2VGNVP}YM@2COXD5.png

    推荐学习:css视频教程

    以上就是input如何去掉边框的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:input 边框
    上一篇:css怎么设置div的边框样式 下一篇:css如何设置背景图片的大小
    大前端线上培训班

    相关文章推荐

    • css如何设置浮动• css如何取消加粗• css怎么设置文件编码• css内边框如何设置• 不支持css3的浏览器有哪些

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网