javascript - bootstrap-markdown 插件的textarea如何使其圆角?

 mobiledu2502869467 发布于 2022-11-27 06:57

最近在使用bootstrap-markdown 这个插件做markdown编辑器,但是这个的默认样式不是圆角的textarea,导致风格不统一,请教如何解决?

$("#comment-box").markdown({});
源本的bootstrap的textarea 样式

使用markdown编辑器后的样式:

请问如何使其圆角呢?

2 个回答
  • 自己看下这个编辑器的id或者class,然后写一个圆角覆盖掉之前的就好了。

    当然直接修改相应的样式表也可以。

    2022-11-27 07:23 回答
  • 使用 css3border-radius 属性来设置元素的圆角样式

    示例代码

    textarea{
        border-radius: 6px;
    }

    参考文档:
    https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-radius

    @typhoonbb
    您好,我刚去看了下bootstrap-markdown官网的demo,不是无效而是它本身的样式不是这么做的。
    首先它给 p.md-editor 增加了 border 所以你光设置 textarea 是没有效果的。
    并且我发现它的 textarea 没有设置 padding 导致文字距离边框为顶格显示挺影响美观的。

    写自定义样式覆盖一下它原本的样式,修改如下:

    /* 去除原样式边框样式 */
    p.md-editor{
        border: none;
    }
    
    /* 设置工具栏边框样式及圆角样式 */
    p.md-editor > p.md-header{
        border: 1px solid #ddd;
        border-radius: 6px 6px 0px 0;
    }
    
    /* 设置textarea边框样式及圆角样式 */
    p.md-editor textarea.md-input{
        padding: 15px;
        border: 1px solid #ddd;
        border-top: none;
        border-radius: 0 0 6px 6px;
    }
    

    修改后的效果图如下:

    2022-11-27 07:23 回答
撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有