Главная » Языки программирования

Стиль поисковой строки css

На чтение 9 мин
Содержание
  1. How TO — Search Bar
  2. Search Bar
  3. Create A Search Bar
  4. Example
  5. Example
  6. CSS Search Boxes
  7. Related Articles:
  8. Author
  9. Links
  10. Made with
  11. About a code
  12. Inspiration Search Bar
  13. Author
  14. Links
  15. Made with
  16. About a code
  17. Awesome Search Box
  18. Author
  19. Links
  20. Made with
  21. About a code
  22. Search Box
  23. Author
  24. Links
  25. Made with
  26. About a code
  27. Search Box Animation
  28. Author
  29. Links
  30. Made with
  31. About a code
  32. Search Input Caret Jump
  33. Author
  34. Links
  35. Made with
  36. About a code
  37. Search Box Animation
  38. Author
  39. Links
  40. Made with
  41. About a code
  42. Custom Search
  43. Author
  44. Links
  45. Made with
  46. About a code
  47. Search Animation — Only CSS
  48. Author
  49. Links
  50. Made with
  51. About a code
  52. Animated Search Interaction
  53. Author
  54. Links
  55. Made with
  56. About a code
  57. Skeuomorphic Search Input
  58. Author
  59. Links
  60. Made with
  61. About a code
  62. :placeholder-shown Selector
  63. Author
  64. Links
  65. Made with
  66. About the code
  67. Search Box Version 2
  68. Author
  69. Links
  70. Made with
  71. About the code
  72. Search Box Focus Effect
  73. Author
  74. Links
  75. Made with
  76. About the code
  77. Search Input Animation
  78. Author
  79. Links
  80. Made with
  81. About the code
  82. Pure CSS Animated Search Bar
  83. Author
  84. Links
  85. Made with
  86. About the code
  87. Search Form With Animated Search Button
  88. Author
  89. Links
  90. Made with
  91. About the code
  92. Expandable Search Bar Animation
  93. Author
  94. Links
  95. Made with
  96. About the code
  97. Pure CSS Expanding Search
  98. Author
  99. Links
  100. Made with
  101. About the code
  102. Search Bar
  103. Author
  104. Links
  105. Made with
  106. About the code
  107. Search Box
  108. Author
  109. Links
  110. Made with
  111. About the code
  112. Animated Search Input
  113. Author
  114. Links
  115. Made with
  116. About the code
  117. Expanding Input
  118. Author
  119. Links
  120. Made with
  121. About the code
  122. Increasing Input
  123. Author
  124. Links
  125. Made with
  126. About the code
  127. Simple On-click Search Field Interaction
  128. Author
  129. Как создать поле поиска
  130. Пример
  131. Пример
  132. Пример
  133. Пример

Learn how to add a search box inside a responsive navigation menu.

Step 1) Add HTML:

Example

Step 2) Add CSS:

Example

/* Add a black background color to the top navigation bar */
.topnav overflow: hidden;
background-color: #e9e9e9;
>

/* Style the links inside the navigation bar */
.topnav a float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
>

/* Change the color of links on hover */
.topnav a:hover background-color: #ddd;
color: black;
>

/* Style the «active» element to highlight the current page */
.topnav a.active background-color: #2196F3;
color: white;
>

/* Style the search box inside the navigation bar */
.topnav input[type=text] float: right;
padding: 6px;
border: none;
margin-top: 8px;
margin-right: 16px;
font-size: 17px;
>

/* When the screen is less than 600px wide, stack the links and the search field vertically instead of horizontally */
@media screen and (max-width: 600px) .topnav a, .topnav input[type=text] float: none;
display: block;
text-align: left;
width: 100%;
margin: 0;
padding: 14px;
>
.topnav input[type=text] border: 1px solid #ccc;
>
>

Читайте также:  Visual studio python publish

Источник

CSS Search Boxes

Welcome to our collection of CSS Search Boxes! In this collection, we have hand-picked a variety of free HTML and CSS search box code examples from popular platforms like CodePen, GitHub, and other reliable resources. This collection serves as an update to our June 2021 collection, featuring six new search box items.

Whether you’re looking for a simple search box or a more advanced and interactive design, you’ll find inspiration and practical examples here to enhance the search functionality on your website.

Author

Made with

About a code

Animation for introducing a search bar on the page.

Compatible browsers: Chrome, Edge, Opera, Safari

Author

Made with

About a code

Awesome search box. Using only HTML & CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Search Box Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Search Input Caret Jump

A search input animation in which the magnifying glass handle flies off, becomes a caret, and plants itself into the field.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Search Box Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Custom CSS search box with shadow and smoke text.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Search Animation — Only CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Animated Search Interaction

A search animation where the head of the magnifying glass becomes the field and the handle grows into a search button. HTML5 validation of non-blank input ensures the field stays open when tabbing to the Search button.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Skeuomorphic Search Input

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

:placeholder-shown Selector

Trying out the :placeholder-shown selector to make a search form. With no JS, it validates and shows/hides the submit button.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Search Box Version 2

After learning the cubic-bezier function on CSS transition , I tried remaking the search box that I did before.

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Made with

About the code

Search Box Focus Effect

Adding a thick outline on focus.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Search Input Animation

A small little pure CSS animation of search interaction.

Compatible browsers: Chrome, Firefox, Opera, Safari

Читайте также:  Java узнать сколько памяти занимает объект

Author

Made with

About the code

Animated seach box using pure HTML & CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Search Form With Animated Search Button

Author

Made with

About the code

Search Form With Animated Search Button

Search form with animated search button which transforms into right arrow on hover.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Expandable Search Bar Animation

Author

Made with

About the code

Expandable Search Bar Animation

Hover effect for search bar in HTML & CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Pure CSS Expanding Search

Author

Made with

About the code

Pure CSS expanding search with custom properties.

Compatible browsers: Chrome, Firefox, Opera, Safari

Demo image: Search Bar

Author

Made with

About the code

Search Bar

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Search Box

Author

Made with

About the code

Search Box

Nice search box. Click on search icon, then type your keyword.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Animated Search Input

Author

Made with

About the code

Animated Search Input

Animated (focus/transition only) search input that looks like a icon.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Expanding Input

Author

Made with

About the code

Expanding Input

A slighty different implementation of Keyframers version.

Compatible browsers: Chrome, Firefox, Opera, Safari

Demo image: Increasing Input

Author

Made with

About the code

Increasing Input

Expanding search field with CSS.

Compatible browsers: Chrome, Firefox, Opera, Safari

Demo image: Simple On-click Search Field Interaction

Author

Made with

About the code

Simple On-click Search Field Interaction

All the icons/images are made with CSS — the onlick interaction is done with the sibling selector ~ .

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: CSS Effect for Search Input

Author

Источник

Как создать поле поиска

Поля поиска распространены на каждой веб-странице. Они очень полезны при поиске конкретной информации. Поле поиска может иметь функцию ввода с автодополнением, что помогает пользователям при поиске.

В этой статье мы пошагово покажем, как можно создать поле поиска с помощью CSS и HTML.

form> input type="text" name=text" placeholder"Search here!"> input type="submit" name="submit" value="Search"> form>

Теперь у нас есть поле поиска, но необходимо добавить стиль.

Есть три элемента, к которым необходимо применить стиль: «form», «search» и»submit».

  • Добавьте фоновый цвет текстовой части (body).
  • Начните оформление классов «form», «search»и «submit».
  • Установите width, margin, padding, и font-size.

После того, как все свойства добавлены, запустите код и увидите результат!

Пример

html> html> head> title>Заголовок документа title> style> body < background-color: #8ebf42; > form < width:400px; margin:auto; margin-top: 250px; > input< padding:4px 10px; border:0; font-size:16px; > .search < width: 75%; > .submit< width: 70px; background-color: #1c87c9; color:#ffffff; > style> head> body> h2>Создайте поле поиска h2> form> input type="text" name=text" class="search" placeholder"Search here!"> input type="submit" name="submit" class="submit" value="Search"> form> body> html>

Давайте создадим другие поля поиска:

Читайте также:  Read more text html

Пример

html> html> head> link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> title>Поле поиска title> style> body < margin: 0; padding: 0; background: #00a08d; > .search-box < position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #666666; height: 40px; border-radius: 40px; padding: 10px; > .search-box:hover > .search-txt < width: 240px; padding: 0 6px; > .search-box:hover > .search-btn < background: white; color: black; > .search-btn < color: #eeeeee; float: right; width: 40px; height: 40px; border-radius: 50%; background: #2f3640; display: flex; justify-content: center; align-items: center; transition: 0.4s; color: white; cursor: pointer; text-decoration:none; > .search-btn > i < font-size: 20px; > .search-txt < border: none; background: none; outline: none; float: left; padding: 0; color: white; font-size: 16px; transition: 0.4s; line-height: 40px; width: 0px; font-weight: bold; > > style> head> body> div class="search-box"> input type="text" name="" class="search-txt" placeholder="Type to search"/> a class="search-btn" href="#"> i class="fa fa-search" aria-hidden="true"> i> a> div> body> html>

В данном примере мы использовали Search icon из Fontawesome.

Другой пример, где использованы только HTML и CSS:

Пример

html> html> head> link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> title>Заголовок документа title> style> body< background: #cccccc; > .search < width: 100%; position: relative; display: flex; > .searchTerm < width: 100%; border: 3px solid #9e0098; border-right: none; padding: 5px; height: 20px; border-radius: 5px 0 0 5px; outline: none; > .searchTerm:focus< color: #380136; > .searchButton < width: 40px; height: 36px; border: 1px solid #9e0098; background: #9e0098; text-align: center; color: #eeeeee; border-radius: 0 5px 5px 0; cursor: pointer; font-size: 20px; > .wrap< width: 30%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); > style> head> body> h2>Создайте поле поиска h2> div class="wrap"> div class="search"> input type="text" class="searchTerm" placeholder="Type"> button type="submit" class="searchButton"> i class="fa fa-search"> i> button> div> div> body> html>

Рассмотрим еще один пример создания поля поиска:

Пример

html> html> head> title>Заголовок документа title> style> *, *::after, *::before < margin: 0; padding: 0; box-sizing: inherit; > html < font-size: 50%; > body < box-sizing: border-box; > .container < width: 25rem; height: 100%; margin: 0 1rem; position: relative; > h2 < margin: 2rem; font-size: 20px; > .searchbar < font-size: 2.4rem; width: 25rem; height: 5rem; border: none; outline: none; border-radius: 10rem; padding: 2rem; transition: all .1s; transition-delay: .1s; > .searchbar:hover < width: 27rem; height: 6rem; > .button < height: 2rem; position: absolute; top: 1.5rem; right: 1rem; transition: all .1s; transition-delay: .1s; > .button:hover < cursor: pointer; > .searchbar:hover + .button < height: 2.5rem; top: 1.8rem; right: 0; > .searchbar::placeholder < opacity: .3; > style> head> body> h2>Создайте поле поиска h2> div class="container"> input type="text" maxlength= "12" placeholder="Search" class="searchbar"> img src="https://images-na.ssl-images-amazon.com/images/I/41gYkruZM2L.png" alt="search icon" class="button"> div> body> html>

Источник

Оцените статью
© 2023 Программирование