Question

如何修复我附加的arrow button我正在使用http://jsfiddle.net/shpoont/3cA4x/代码。我无法更改Html代码，它们是由程序生成的。我只能覆盖CSS代码。谢谢你的帮助。按钮代码的简短列表如下：

<button id="flowSelectUsersBtn" class="btn btn-progress progress-active" href="#">
    <span class="hidden-xs ng-binding">Select Users</span>
</button>

[![arrow button][1]][1]

以下是CSS代码：

.progress-active {
    position: relative;
    padding-left: 18px;
    padding-right: 18px;

}
.progress-active {
    padding-left: 36px;
}

.progress-active:before,
.progress-active:after { 
    content:"";
    position: absolute;
    top: 5px; 
    width: 22px; 
    height: 22px; 
    background: inherit; 
    border: inherit; 
    border-left-color: transparent; 
    border-bottom-color: transparent;
    border-radius: 0px 4px 0px 0px; 
    -webkit-border-radius: 0px 4px 0px 0px;
    -moz-border-radius: 0px 4px 0px 0px;
}
.progress-active:before,
.progress-active:after {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
}

.progress-active:before{ 
    left: -11px;
}
.progress-active:after { 
    right: -11px;
}
.progress-active:after { 
    z-index: 1;
}
.progress-active:before { 
    background-color: white;
}

Answer 1

    .progress-active {
        position: relative;
        padding-left: 18px;
        padding-right: 18px;
        border: none;

    }
    .progress-active {
        padding-left: 36px;
    }

    .progress-active:before,
    .progress-active:after { 
        content:"";
        position: absolute;
        top: 2px; 
        width: 13px; 
        height: 13px; 
        background: inherit;  
        
    }
    .progress-active:before,
    .progress-active:after {
        transform: rotate(90deg);
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
    }

    .progress-active:before{ 
        left: -5px;
    }
    .progress-active:after { 
        right: -5px;
    }
    .progress-active:after { 
        z-index: 1;
    }
    .progress-active:before { 
        background-color: white;
    }

<button id="flowSelectUsersBtn" class="btn btn-progress progress-active" href="#">
                  <span class="hidden-xs ng-binding">Select Users</span>
                  </button>
                  <button id="flowSelectUsersBtn" class="btn btn-progress progress-active" href="#">
                  <span class="hidden-xs ng-binding">Select Users</span>
                  </button>
                  <button id="flowSelectUsersBtn" class="btn btn-progress progress-active" href="#">
                  <span class="hidden-xs ng-binding">Select Users</span>
                  </button>

如何修复箭头按钮

1 个答案: