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

Html button for search

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

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

Читайте также:  String format java string array

Пример

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>

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

Пример

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>

Источник

Читайте также:  Как поменять элемент массива php

28 CSS Search Boxes

Collection of hand-picked free HTML and CSS search box code examples. Update of July 2020 collection. 5 new items.

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.

Читайте также:  Переадресация страницы через php

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

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

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

Made with

About the code

CSS Effect for Search Input

Just a simple and a bit fancy CSS effect for input field.

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

Demo image: Animating Search Box

Author

Made with

About the code

An animating search box made with HTML & CSS

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

Demo image: CSS Search Box

Author

Made with

About the code

Pretty search box in HTML and CSS.

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

Demo image: Search Input Animation

Author

Made with

About the code

Search Input Animation

Search input animation (pure css, without svg). Added variables for width , height and border-width , so now you can easily change overall dimensions of this search input. This demo have only one problem — no input autofocus after opening click.

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

Demo image: Animated Search Form

Author

Источник

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