Datatableの検索ボックスをスタイリングする方法は？ （今）

Question

マイ検索ボックス

私はそれが私の答えです。この

おかげ

Answer 1

ように私のチェックボックスをスタイリングしたいです。

しかし、それは良いコードではないかもしれません。

HTMLコード

<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/XaRmrpenter code here