css - 如何在 materialize.css 中删除可折叠 div/li 的边框

Question

我正在尝试在集合列表项中创建一个可折叠项。但我不希望可折叠 div 的灰色边框在此可折叠中可见。

标记:

<li class="collection-item">
    <ul class="collapsible" data-collapsible="accordion">
        <li>
           <div class="collapsible-header">First</div>
           <div class="collapsible-body">Lorem ipsum dolor sit amet.</div>
        </li>  
     </ul>
</li>

CSS:

.collapsible-header, .collapsible-body, .collapsible, ul.collapsible>li 
{
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  padding: 0rem !important;
  border-top: 0px!important;
  border-right: 0px!important;
  border-left: 0px!important;
  border-bottom: 0px!important;
  box-shadow: 0px;
  background: #fff;
}

Answer 1

use this css box-shadow: none!important;

.collapsible-header, .collapsible-body, .collapsible, ul.collapsible>li 
{
  margin: 0!important;;
  padding: 0!important;
  border: 0!important;
  box-shadow: none!important;
  background: #fff;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css" rel="stylesheet"/>
<li class="collection-item">
    <ul class="collapsible" data-collapsible="accordion">
        <li>
           <div class="collapsible-header">First</div>
           <div class="collapsible-body">Lorem ipsum dolor sit amet.</div>
        </li>  
     </ul>
</li>