Question

我正在使用jquery-datatable，并希望在选择框和搜索框中添加背景颜色。所以它看起来像具有相同背景颜色的标题。

$(document).ready(function(){
  $('#users').DataTable();
})

如何将属性传递给数据表以更改背景颜色选择框和搜索框？

Answer 1

标题的外观取决于您使用的CSS主题（默认，jQueryUI，引导程序，基础），因此无法准确说明您需要的颜色。但要更改长度菜单和搜索框的background-color，请使用以下CSS并替换＆＃34; red＆＃34;用你想要的颜色：

.dataTables_length select {
   background-color: red;
}
.dataTables_filter input {
   background-color: red;
}

演示 - ＆gt;的 http://jsfiddle.net/rw27Lz11/

Answer 2

在CSS之下固定了我的页面。对于选择

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row flex-wrap" style>
  <div class="col-sm-6 col-md-3 d-flex flex-column" style="cursor:pointer; transition: border .2s ease-in-out; margin:15px; border: 1px solid #ddd; border-radius: 4px; height:auto; box-shadow: 0 2px 3px rgba(0,0,0,.075);">
    <img style="vertical-align: middle;" class="img-responsive" src="https://i.dell.com/das/xa.ashx/global-site-design%20web/00000000-0000-0000-0000-000000000000/1/LargePNG?id=Dell/Product_Images/Dell_Client_Products/Notebooks/Latitude_Notebooks/12_7275/global_spi/notebook-latitude-12-7275-black-left-windows-hero-504x350.psd"
      alt="...">
    <div>
      <h4 style="overflow-wrap: break-word; word-wrap: break-word;" class="text-center">Laptop Dell XPS 9250 12.5" (m56Y57/8GB/256GB/ HD)</h4>
    </div>
    <div class="text-center" style="margin-top:auto;">
      <span style="color:yellow;background-color:red;font-size:18px;">-67% OFF NOW!</span>
    </div>
    <div>
      <h5 class="text-center" style="margin-right:5px; font-size:18px;"><span style="text-decoration: line-through; color:black; font-size:22px;"><span style="color:red; font-size:20px">$2499.99</span></span> $1499.99</h5>
    </div>
    <div class="text-center" style="">
      <button class="btn btn-success add_to_cart" style="margin-bottom:5px;">Add to cart</button>
    </div>
  </div>

  <div class="col-sm-6 col-md-3  d-flex flex-column" style="cursor:pointer; transition: border .2s ease-in-out; margin:15px; border: 1px solid #ddd; border-radius: 4px; height:auto; box-shadow: 0 2px 3px rgba(0,0,0,.075);">
    <img style="vertical-align: middle;" class="img-responsive" src="https://external.webstorage.gr/Product-Images/1312102/quest-slimbook-convertible-1000-1312102.jpg" alt="...">
    <div>
      <h4 style="overflow-wrap: break-word; word-wrap: break-word;" class="text-center">Laptop Quest Slimbook 360 Convertible - 13.3" (Celeron N3350/4GB/32GB/HD)</h4>
    </div>
    <div class="text-center" style="margin-top:auto;">
      <span style="color:yellow;background-color:red;font-size:18px;">-40% OFF NOW!</span>
    </div>
    <div>
      <h5 class="text-center" style="margin-right:5px; font-size:18px;"><span style="text-decoration: line-through; color:black; font-size:22px;"><span style="color:red; font-size:20px">$349</span></span> $249</h5>
    </div>
    <div class="text-center">
      <button class="btn btn-success add_to_cart" style="margin-bottom:5px;">Add to cart</button>
    </div>
  </div>  <div class="col-sm-6 col-md-3 d-flex flex-column" style="cursor:pointer; transition: border .2s ease-in-out; margin:15px; border: 1px solid #ddd; border-radius: 4px; height:auto; box-shadow: 0 2px 3px rgba(0,0,0,.075);">
    <img style="vertical-align: middle;" class="img-responsive" src="https://i.dell.com/das/xa.ashx/global-site-design%20web/00000000-0000-0000-0000-000000000000/1/LargePNG?id=Dell/Product_Images/Dell_Client_Products/Notebooks/Latitude_Notebooks/12_7275/global_spi/notebook-latitude-12-7275-black-left-windows-hero-504x350.psd"
      alt="...">
    <div>
      <h4 style="overflow-wrap: break-word; word-wrap: break-word;flex:1;" class="text-center">Laptop Dell XPS 9250 12.5" (m56Y57/8GB/256GB/ HD)</h4>
    </div>
    <div class="text-center" style="margin-top:auto;">
      <span style="color:yellow;background-color:red;font-size:18px;">-67% OFF NOW!</span>
    </div>
    <div>
      <h5 class="text-center" style="margin-right:5px; font-size:18px;"><span style="text-decoration: line-through; color:black; font-size:22px;"><span style="color:red; font-size:20px">$2499.99</span></span> $1499.99</h5>
    </div>
    <div class="text-center" style="">
      <button class="btn btn-success add_to_cart" style="margin-bottom:5px;">Add to cart</button>
    </div>
  </div>

  <div class="col-sm-6 col-md-3  d-flex flex-column" style="cursor:pointer; transition: border .2s ease-in-out; margin:15px; border: 1px solid #ddd; border-radius: 4px; height:auto; box-shadow: 0 2px 3px rgba(0,0,0,.075);">
    <img style="vertical-align: middle;" class="img-responsive" src="https://external.webstorage.gr/Product-Images/1312102/quest-slimbook-convertible-1000-1312102.jpg" alt="...">
    <div>
      <h4 style="overflow-wrap: break-word; word-wrap: break-word;" class="text-center">Laptop Quest Slimbook 360 Convertible - 13.3" (Celeron N3350/4GB/32GB/HD)</h4>
    </div>
    <div class="text-center" style="margin-top:auto;">
      <span style="color:yellow;background-color:red;font-size:18px;">-40% OFF NOW!</span>
    </div>
    <div>
      <h5 class="text-center" style="margin-right:5px; font-size:18px;"><span style="text-decoration: line-through; color:black; font-size:22px;"><span style="color:red; font-size:20px">$349</span></span> $249</h5>
    </div>
    <div class="text-center">
      <button class="btn btn-success add_to_cart" style="margin-bottom:5px;">Add to cart</button>
    </div>
  </div>  <div class="col-sm-6 col-md-3 d-flex flex-column" style="cursor:pointer; transition: border .2s ease-in-out; margin:15px; border: 1px solid #ddd; border-radius: 4px; height:auto; box-shadow: 0 2px 3px rgba(0,0,0,.075);">
    <img style="vertical-align: middle;" class="img-responsive" src="https://i.dell.com/das/xa.ashx/global-site-design%20web/00000000-0000-0000-0000-000000000000/1/LargePNG?id=Dell/Product_Images/Dell_Client_Products/Notebooks/Latitude_Notebooks/12_7275/global_spi/notebook-latitude-12-7275-black-left-windows-hero-504x350.psd"
      alt="...">
    <div>
      <h4 style="overflow-wrap: break-word; word-wrap: break-word;flex:1;" class="text-center">Laptop Dell XPS 9250 12.5" (m56Y57/8GB/256GB/ HD)</h4>
    </div>
    <div class="text-center" style="margin-top:auto;">
      <span style="color:yellow;background-color:red;font-size:18px;">-67% OFF NOW!</span>
    </div>
    <div>
      <h5 class="text-center" style="margin-right:5px; font-size:18px;"><span style="text-decoration: line-through; color:black; font-size:22px;"><span style="color:red; font-size:20px">$2499.99</span></span> $1499.99</h5>
    </div>
    <div class="text-center" style="">
      <button class="btn btn-success add_to_cart" style="margin-bottom:5px;">Add to cart</button>
    </div>
  </div>

  <div class="col-sm-6 col-md-3  d-flex flex-column" style="cursor:pointer; transition: border .2s ease-in-out; margin:15px; border: 1px solid #ddd; border-radius: 4px; height:auto; box-shadow: 0 2px 3px rgba(0,0,0,.075);">
    <img style="vertical-align: middle;" class="img-responsive" src="https://external.webstorage.gr/Product-Images/1312102/quest-slimbook-convertible-1000-1312102.jpg" alt="...">
    <div>
      <h4 style="overflow-wrap: break-word; word-wrap: break-word;" class="text-center">Laptop Quest Slimbook 360 Convertible - 13.3 Laptop Quest Slimbook 360 Convertible - 13.3Laptop Quest Slimbook 360 Convertible - 13.3" (Celeron N3350/4GB/32GB/HD)</h4>
    </div>
    <div class="text-center" style="margin-top:auto;">
      <span style="color:yellow;background-color:red;font-size:18px;">-40% OFF NOW!</span>
    </div>
    <div>
      <h5 class="text-center" style="margin-right:5px; font-size:18px;"><span style="text-decoration: line-through; color:black; font-size:22px;"><span style="color:red; font-size:20px">$349</span></span> $249</h5>
    </div>
    <div class="text-center">
      <button class="btn btn-success add_to_cart" style="margin-bottom:5px;">Add to cart</button>
    </div>
  </div>  <div class="col-sm-6 col-md-3 d-flex flex-column" style="cursor:pointer; transition: border .2s ease-in-out; margin:15px; border: 1px solid #ddd; border-radius: 4px; height:auto; box-shadow: 0 2px 3px rgba(0,0,0,.075);">
    <img style="vertical-align: middle;" class="img-responsive" src="https://i.dell.com/das/xa.ashx/global-site-design%20web/00000000-0000-0000-0000-000000000000/1/LargePNG?id=Dell/Product_Images/Dell_Client_Products/Notebooks/Latitude_Notebooks/12_7275/global_spi/notebook-latitude-12-7275-black-left-windows-hero-504x350.psd"
      alt="...">
    <div>
      <h4 style="overflow-wrap: break-word; word-wrap: break-word;flex:1;" class="text-center">Laptop Dell XPS 9250 12.5" (m56Y57/8GB/256GB/ HD)</h4>
    </div>
    <div class="text-center" style="margin-top:auto;">
      <span style="color:yellow;background-color:red;font-size:18px;">-67% OFF NOW!</span>
    </div>
    <div>
      <h5 class="text-center" style="margin-right:5px; font-size:18px;"><span style="text-decoration: line-through; color:black; font-size:22px;"><span style="color:red; font-size:20px">$2499.99</span></span> $1499.99</h5>
    </div>
    <div class="text-center" style="">
      <button class="btn btn-success add_to_cart" style="margin-bottom:5px;">Add to cart</button>
    </div>
  </div>

  <div class="col-sm-6 col-md-3  d-flex flex-column" style="cursor:pointer; transition: border .2s ease-in-out; margin:15px; border: 1px solid #ddd; border-radius: 4px; height:auto; box-shadow: 0 2px 3px rgba(0,0,0,.075);">
    <img style="vertical-align: middle;" class="img-responsive" src="https://external.webstorage.gr/Product-Images/1312102/quest-slimbook-convertible-1000-1312102.jpg" alt="...">
    <div>
      <h4 style="overflow-wrap: break-word; word-wrap: break-word;" class="text-center">Laptop Quest Slimbook 360 Convertible - 13.3 Laptop Quest Slimbook 360 Convertible - 13.3" (Celeron N3350/4GB/32GB/HD)</h4>
    </div>
    <div class="text-center" style="margin-top:auto;">
      <span style="color:yellow;background-color:red;font-size:18px;">-40% OFF NOW!</span>
    </div>
    <div>
      <h5 class="text-center" style="margin-right:5px; font-size:18px;"><span style="text-decoration: line-through; color:black; font-size:22px;"><span style="color:red; font-size:20px">$349</span></span> $249</h5>
    </div>
    <div class="text-center">
      <button class="btn btn-success add_to_cart" style="margin-bottom:5px;">Add to cart</button>
    </div>
  </div>
</div>

和标签

.dataTables_wrapper 
     div.dataTables_wrapper 
         div.dataTables_filter select {
     color: white;
     background-color: red;
}

如何将背景颜色添加到数据表搜索框并选择框

2 个答案: