Css search by content

35 Fancy CSS Search Boxes

Here are some fancy CSS search box examples that you can use on your website.

All the examples are built with CSS only.

You may also like

• 75 CSS Text Animations You Can Use
• 15 Amazing CSS Animated Background for you to try
• 57 Beautiful CSS Cards examples to improve your UI
• 19 Cool CSS Loading Animation to inspire you
• 21 Modern CSS menu examples
• 19 Stylish CSS forms
• 23 Fantastic CSS Hover Effects
• 19 CSS Border Animations you can implement
• 15 Stylised CSS Tables
• 13 Pure CSS Dropdown Menus
• 15 Creative CSS Filter Examples
• 35 Unique CSS Text Effects
• 15 CSS Sliders you can use
• 21 New Bootstrap Login Forms for you
• 19 Bootstrap Profiles you can use for yourself
• 13 Material Design Login Forms
• 35 Cool CSS Select Boxes
• 15 CSS Range Sliders you can use today
• 35 Creative use of CSS clip-path examples
• 29 Unique CSS Toggle Switches
• 41 Beautiful CSS Animation Examples

CSS Search Box

Dev: Jamie Coulter

HTML Textbox with a clear button in Pure CSS and without JavaScript

Dev: Shidhin

Animating search box

Dev: Jarno van Rhijn

Search box v.2 (CSS Only)

Dev: Takane Ichinose

CSS Expanding Search Box

Dev: WebDevStudios

Search Interaction

Dev: Vineeth.TR

Dev: Takane Ichinose

Search Box and Button Animated

Dev: Victor Freire

Material search field

Pure CSS expand text box on focus

Dev: James Thomas Almond

Search Box Focus Effect

Dev: Chris Smith

Search Box Animation

Dev: Yuhomyan

CSS only expanding search form

Dev: Jinson Abraham

Search Box – 2

See the Pen Search Box – 2 by Short Code (@ShortCode) on CodePen.

Dev: Short Code

UI #2 – Search Bar

Dev: Jove Angelevski

Search Form With Animated Search Button

Dev: Himalaya Singh

Animated Search Interaction

Dev: Jon Kantner

Expanding text box/button

Dev: Sam Daitzman

Animated Search Box

Dev: Alex Tkachev

Animated Search Box

Dev: Chouaib Belagoun

Expanding Input

Dev: Steve Gardner

Awesome Search Box – Using Only HTML & CSS

Dev: Ahmad Emran

Pure CSS Animated Search Bar

Dev: Omar Sherif

Animated Search Bar

Dev: Stefan C.

Animated search input

Dev: Lucas Henrique

Animated Search Box

Dev: Aqib Hanief Bhat

Search Input Caret Jump

Dev: Jon Kantner

Custom Search

Dev: co0kie

Search animation – Only CSS

Dev: Milan Raring

Skeuomorphic search input

Dev: Jonas Badalic

Placeholder-shown selector

Search input animation

Dev: Aaron Iker

Increasing Input

Simple Search Field (Pure CSS)

Dev: Charlie Marcotte

Animated search Form

See the Pen Animated search Form by Christophe Béghin (@CBeghin) on CodePen.

Dev: Christophe Béghin

Latest Post

55 Cool CSS Calendars

19 Barcodes in CSS

25 CSS Masonry Layout Examples

23 CSS Card Layouts

27 CSS Subscribe Forms

We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it. Ok

Источник

A way to match on text using CSS locators

So I use xpath locators and slowly converting to CSS.
I haven’t found a way to do an exact match based on text. For example converting //a[text()=’Log Out’] . I know you can do css=a:contains(‘Log Out’) but I want to match exactly to the text. Also I know I can do link=Log Out but looking for a solution with CSS.

6 Answers 6

css=a[text='Log Out'] or a[innertext='Log Out'] 

Can you please try this one out?

Or if that doesn’t work and you still don’t want to use xpath because it’s slow, you can always try: link=Log Out . That’s still better then xpath.

So i found a possible solution for you mate. If you are trying to find an exact String you could always use Regular expression like this:

Just replace div with a and there you go. This will find ONLY AB in whatever text div it looks for. OFC if you have more then one links with text AB (which is a bad thing 😛 ) then it will find them all..

Try this and see if it helps. 🙂

Neither of those work unfortunately. I know I can use link=Log Out but just seeing if there was a solution in CSS.

Sorry to hear that 🙁 Unfortunately I don’t think CSS has match exact param. But I might be mistaken. Hope you find an answer soon mate. 🙂 Cheers.

:contains() is not part of the current CSS3 specification so it will not work on all browsers, only ones that implemented it before it was pulled. (see w3.org/TR/css3-selectors)

This is a nice place for a few CSS selectors.

Thought it might be useful for people following this thread.

For those who are looking to do Selenium css text selections this script might be of some use

Trick is to select parent of element of one that you are looking for and then search for child that has the text.

public static IWebElement FindByText(this IWebDriver driver, string text) < var list = driver.FindElement(By.CssSelector("#RiskAddressList")); var element = ((IJavaScriptExecutor)driver).ExecuteScript(string.Format(" var x = $(arguments[0]).find(\":contains('')\"); return x;", text), list); return ((System.Collections.ObjectModel.ReadOnlyCollection)element)[0]; > 

this will return first element if there is more than one since it’s always one element in my case.

As per the following discussions:

The :contains pseudo-class isn’t in the CSS Spec and is not supported by either Firefox or Chrome (even outside WebDriver).

Python based solution

To locate the element with text as Log Out you can use either of the following Locator Strategies:

element = driver.find_element(By.LINK_TEXT, "Log Out") 

element = driver.find_element(By.XPATH, "//a[text()='Log Out']") 

Ideally, to locate the element you need to induce WebDriverWait for the visibility_of_element_located() and you can use either of the following Locator Strategies:

element = WebDriverWait(driver, 20).until(EC.visibility_of_element_located((By.LINK_TEXT, "Log Out"))) 

element = WebDriverWait(driver, 20).until(EC.visibility_of_element_located((By.XPATH, "//a[text()='Log Out']"))) 

from selenium.webdriver.support.ui import WebDriverWait from selenium.webdriver.common.by import By from selenium.webdriver.support import expected_conditions as EC 

Java based solution

To identify the element with text as Log Out you can use either of the following Locator Strategies:

WebElement element = driver.findElement(By.linkText("Log Out")); 

WebElement element = driver.findElement(By.xpath("//a[text()='Log Out']")); 

Ideally, to identify the element you need to induce WebDriverWait for the visibilityOfElementLocated() and you can use either of the following Locator Strategies:

WebElement element = new WebDriverWait(driver, 20).until(ExpectedConditions.visibilityOfElementLocated(By.linkText("Log Out"))); 

WebElement element = new WebDriverWait(driver, 20).until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//a[text()='Log Out']"))); 

References

You can find a couple of relevant detailed discussions in:

Источник

28 CSS Search Boxes

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

Related Articles:

Author

Links

Made with

About a code

Awesome Search Box

Awesome search box. Using only HTML & CSS.

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

Author

Links

Made with

About a code

Search Box

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

Author

Links

Made with

About a code

Search Box Animation

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

Author

Links

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

Links

Made with

About a code

Search Box Animation

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

Author

Links

Made with

About a code

Custom Search

Custom CSS search box with shadow and smoke text.

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

Author

Links

Made with

About a code

Search Animation — Only CSS

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

Author

Links

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

Links

Made with

About a code

Skeuomorphic Search Input

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

Author

Links

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

Links

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

Links

Made with

About the code

Search Box Focus Effect

Adding a thick outline on focus.

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

Author

Links

Made with

About the code

Search Input Animation

A small little pure CSS animation of search interaction.

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Links

Made with

About the code

Pure CSS Animated Search Bar

Animated seach box using pure HTML & CSS.

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

Author

Links

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

Author

Links

Made with

About the code

Expandable Search Bar Animation

Hover effect for search bar in HTML & CSS.

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

Author

Links

Made with

About the code

Pure CSS Expanding Search

Pure CSS expanding search with custom properties.

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Links

Made with

About the code

Search Bar

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

Author

Links

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

Author

Links

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

Author

Links

Made with

About the code

Expanding Input

A slighty different implementation of Keyframers version.

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Links

Made with

About the code

Increasing Input

Expanding search field with CSS.

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Links

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

Author

Links

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

Author

Links

Made with

About the code

Animating Search Box

An animating search box made with HTML & CSS

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

Author

Links

Made with

About the code

CSS Search Box

Pretty search box in HTML and CSS.

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

Author

Links

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

Author

Источник