change bootstrap dropdown caret

Question

I`m working on bootstrap 3 I have little drodown

<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>

on the caret is default dropdown triangle and I need to change with this

.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;
}

but I do not know caret default width and height + I can not remove the default triangle please help me.

how can I do this?

Answer 1

What you already did was great, here is what you were asking for :

.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 {...} Render a square (8px*8px) with only border top and left. In order to get an arrow, this square is rotated (45deg), this way the corder is on top. This is your first arrow.

.selectcity .caret:before {...} do the job for the second arrow, but instead of a rotation of 45deg, this is 180deg to get the corner to the bottom.