如何將手風琴css更改爲純白色？

我使用的是angularjs和bootstrap手風琴，我需要以純白的顏色製作沒有任何邊框或顏色的手風琴。像下面的圖像。如何將手風琴css更改爲純白色？

enter image description here

我的代碼

<div class="panel panel-default"> 
    <div class="panel-body"> 
     <accordion> 
      <accordion-group is-open="item.open" ng-repeat="item in filterGroup | filter:searchText"> 
       <accordion-heading> 
        <input type="checkbox" class="pull-left glyphicon" ng-click="filterHeaderClick(item.title, $event)" ng-model="master" value="{{item.title}}"/>{{ item.title }} 
        <span class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': item.open, 'glyphicon-chevron-up': !item.open}"></span> 
       </accordion-heading> 
       <div ng-repeat="data in item.content"> 
        <input type="checkbox" class="pull-left glyphicon" ng-click="filterSubitemClick(data, item.title, $event)" ng-checked="master" value="{{data}}" />{{data}} 
       </div> 
      </accordion-group> 
     </accordion> 
     <div class="pull-right"> 
      <button type="button" class="btn btn-default btn-xs" ng-click="applyFilterClick($event)">Apply Filter</button> 
     </div> 
    </div> 
</div> 

$scope.filterGroup = [{ 
    title: "Task Type", 
    content: ["Task Type 1", "Task Type 2", "Task Type 3", "Task Type 4"], 
    open: false, 
    checked: false 

}, { 
    title: "Connectors", 
    content: ["c1", "c2"], 
    open: false, 
    checked: false 
}, { 
    title: "Schedules", 
    content: ["s1", "s2"], 
    open: false, 
    checked: false 
}, { 
    title: "Secure Agents", 
    content: ["a1", "zmr"], 
    open: false, 
    checked: false 
}];

我的手風琴截圖

enter image description here

來源

2014-11-22 Ricky

沒有CSS不能做太多。 – 2014-11-22 15:30:33

請提供小提琴或演示或至少一些與之相關的CSS ......... – optimus 2014-11-22 15:42:33

正如@Aditya塞西說，你需要重寫引導CSS，但也有需要被移除的面板，標題圖片。包裝你panel-body DIV一個低於定製的div

<div id="custom-accord"> 
    <!-- your panel-body content--> 
</div>

內部和下方的CSS

#custom-accord .panel-default { 
    border-color: white !important; 
} 
#custom-accord .panel-heading { 
    background-color: white !important; 
    border-color: white !important; 
    background-image: none !important; 
} 
#custom-accord .panel-group .panel-heading+.panel-collapse .panel-body { 
    border-top: 0px white !important; 
}

來源

2014-11-22 18:31:56 abi1964

你需要重寫引導的CSS。我建議你使用scss，並用它來控制這個功能。

你的HTML

<div class="custom"> 
    <div class="panel panel-default"> 
     <div class="panel-body"> 
      <accordion> 
       <accordion-group is-open="item.open" ng-repeat="item in filterGroup | filter:searchText"> 
        <accordion-heading> 
         <input type="checkbox" class="pull-left glyphicon" ng-click="filterHeaderClick(item.title, $event)" ng-model="master" value="{{item.title}}"/>{{ item.title }} 
         <span class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': item.open, 'glyphicon-chevron-up': !item.open}"></span> 
        </accordion-heading> 
        <div ng-repeat="data in item.content"> 
         <input type="checkbox" class="pull-left glyphicon" ng-click="filterSubitemClick(data, item.title, $event)" ng-checked="master" value="{{data}}" />{{data}} 
        </div> 
       </accordion-group> 
      </accordion> 
      <div class="pull-right"> 
       <button type="button" class="btn btn-default btn-xs" ng-click="applyFilterClick($event)">Apply Filter</button> 
      </div> 
     </div> 
    </div>

在你SCSS文件

.custom { 
    .panel-default>.panel-heading { 
     background-color: white !important; 
     border-color: white !important; 
    } 

    .panel-default { 
     border-color: white !important; 
    } 

    .panel-default>.panel-heading+.panel-collapse .panel-body { 
     border-color: white !important; 
    } 
}

來源

2014-11-22 15:52:58

如何將手風琴css更改爲純白色？

回答

相關問題