如何在Datatable中设置样式搜索框?

时间:2017-08-09 02:49:58

标签: css dom datatable

我的搜索框(现在) My Searchbox (Now)

我想像这样设置我的复选框样式 I want to styling my checkbox like this

由于

1 个答案:

答案 0 :(得分:2)

这是我的答案。

但也许它不是很好的代码。

  

HTML CODE

<div class="search-form">
  <input type="text" id="search" />
  <span id="search-icon"></span>
</div>
  

CSS代码

.search-form{
  position: relative;
  width: 250px;

}

#search{
  border: none;
  width: 250px;
  height: 40px;
  box-shadow: 3px 5px 5px lightgray;
  border-radius: 40px;
  outline: none;
  box-sizing: border-box;
  padding-left: 10px;
  padding-right: 40px;
}

#search-icon{
  display: inline-block;
  position: absolute;
  right: 15px;
  top: 10px;
  border-radius: 100%;
  border: 2px solid blue;
  width: 12px;
  height: 12px;
}
#search-icon::after{
  content: '';
  position: absolute;
  display: inline-block;
  transform: rotate(45deg);
  width: 10px;
  height: 2px;
  background-color: blue;
  left: 10px;
  top: 15px;

}
  

https://codepen.io/anon/pen/XaRmrp enter code here