FuzzySearch.css 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. * {
  2. box-sizing: border-box;
  3. }
  4. .FuzzySearch_Container {
  5. position: relative;
  6. width: 190px;
  7. margin-right: 5px;
  8. }
  9. /* input */
  10. .FuzzySearch_Container div input[type="text"] {
  11. width: 100%;
  12. height: 38px;
  13. line-height: 1;
  14. padding: 9px 8px;
  15. border: 1px solid #ddd;
  16. }
  17. .FuzzySearch_Container div:nth-of-type(2) {
  18. width: 100%;
  19. max-height: 300px;
  20. border: 1px solid #ddd;
  21. border-top: 0;
  22. overflow-y: scroll;
  23. position: absolute;
  24. top: 38px;
  25. z-index: 99999;
  26. background: #fff;
  27. display: none;
  28. }
  29. .FuzzySearch_Container div:nth-of-type(2) a {
  30. text-decoration: none;
  31. display: block;
  32. padding: 10px;
  33. color: #333;
  34. }
  35. .FuzzySearch_Container div:nth-of-type(2) a:hover {
  36. color: #fff;
  37. background-color: #ddd;
  38. background-color: #5FB878;
  39. }
  40. .FuzzySearch_Container div:nth-of-type(1)::after {
  41. border-left: 5px solid transparent;
  42. border-right: 5px solid transparent;
  43. border-top: 5px solid #999;
  44. content: "";
  45. position: absolute;
  46. width: 0;
  47. right: 5%;
  48. top: 45%;
  49. }
  50. .FuzzySearch_Container div:nth-of-type(1){
  51. height: 38px;
  52. }
  53. .FuzzySearch_Container div:nth-of-type(1) .cross {
  54. position: absolute;
  55. right: 22px;
  56. top: 12px;
  57. display: inline-block;
  58. font-size: 20px;
  59. color:#000;
  60. width: 14px;
  61. height: 14px;
  62. text-align: center;
  63. line-height: 14px;
  64. }
  65. .FuzzySearch_Container div:nth-of-type(1) .cross:hover {
  66. cursor: pointer;
  67. }