Question

我正在使用bootstrap 3 我有点醉了

<div class="btn-group">
                                    <button type="button" class="btn btn-default dropdown-toggle selectcity"
                                            data-toggle="dropdown"><span class="selectedcity">City</span> <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu" role="menu">
                                        <li><a href="#">Tbilisi</a></li>
                                        <li><a href="#">Moscow</a></li>
                                        <li><a href="#">London</a></li>
                                    </ul>
                                </div>

插入符号上的

是默认的下拉三角形我需要改变这个

.selectcity .caret {
    position: relative;
    margin: 50px;
    height: 100px;
    width: 100px;
    transform: rotate(45deg);
}
.selectcity .caret:before {
    content: "";
    height: 40%;
    width: 40%;
    top: 0;
    left: 0;
    position: absolute;
    border-top: 5px solid #36b0d9;
    border-left: 5px solid #36b0d9;
    transition: all 0.6s;
}
.selectcity .caret:after {
    content: "";
    height: 40%;
    width: 40%;
    bottom: 0;
    right: 0;
    position: absolute;
    border-bottom: 5px solid #36b0d9;
    border-right: 5px solid #36b0d9;
    transition: all 0.6s;
}
.selectcity .caret:hover:before,
.selectcity .caret:hover:after {
    border-color: #1e5c75;
}

但我不知道插入符号的默认宽度和高度 +我无法删除默认三角形请帮帮我。

我该怎么做？

Answer 1

你已经做的很棒，这就是你要求的：

.selectcity .caret {
    border-top:2px solid #36b0d9;
    border-right: 0px solid transparent;
    border-left: 2px solid #36b0d9;
    position: relative;
    margin: 0;
    height: 8px;
    width: 8px;
    transform: rotate(45deg);
    transition: all 0.6s;
    margin-top:-5px;
    margin-left:4px;
}
.selectcity .caret:before {
    content:"";
    height: 8px;
    width: 8px;
    top: 2px;
    left: 2px;
    position: absolute;
    transition: all 0.6s;
    border-top:2px solid #36b0d9;
    border-right: 0px solid transparent;
    border-left: 2px solid #36b0d9;
    transform: rotate(180deg);
}
.selectcity:hover .caret, .selectcity:hover .caret:before {
    border-color:#1e5c75;
}

jsFiddle

.selectcity .caret {...}渲染一个只有边框顶部和左边的正方形（8px * 8px）。为了得到一个箭头，这个方块旋转（45度），这样corder在顶部。这是你的第一支箭。

.selectcity .caret:before {...}为第二个箭头执行任务，但不是旋转45度，而是将角度调到底部为180度。

改变bootstrap下拉插入符号

1 个答案: