WooCommerce Search Label Text-Transform

  • Resolved gevcen

    (@gevcen)


    5 years, 6 months ago

    Dear,

    I have a WooCommerce search feature on my website, where I’d like to do the following.

    I wish to make all the searches performed with “text-transform : lowercase” but I want to keep the string displayed by default “What are you looking for?” as initial with first letter in capital.

    I tried the below code but it makes lower-case on everything, including the default label. Can you help me please?

    .search-style-with-bg.searchform input[type=text] {
	text-transform: lowercase
}

    If I ask this request, it’s because on mobile devices, the automatic correctors make by default the first letter as capital, which doesn’t suit what I have to do here.

    Thanks

    • This topic was modified 5 years, 6 months ago by gevcen.

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Support kellymetal a11n

    (@kellymetal)

    Hi there!

    If I understand correctly, you would like to force the text in the search box to be lowercase, but keep the placeholder text “What are you looking for?” capitalized (please let me know if you meant something different). If that’s the case, then the following CSS should hopefully do the trick:

    /* Make input string lowercase, but keep placeholder capitalized */
.search-style-with-bg.searchform input[type=text] {
  text-transform: lowercase;
}

.search-style-with-bg.searchform input[type=text]::placeholder {
	text-transform: capitalize;
}

    I hope that helps! Have a wonderful day!

    Thread Starter gevcen

    (@gevcen)

    Wonderful !

    I slightly adjusted it to :

    .search-style-with-bg.searchform input[type=text] {
  text-transform: lowercase;
}
.search-style-with-bg.searchform input[type=text]::placeholder {
  text-transform: initial;
}

    Thanks

    Thread Starter gevcen

    (@gevcen)

    Actually, it works fine with :

    – chrome (desktop & mobile)
    – firefox (desktop & mobile)
    – edge (mobile)

    but doesn’t work with :

    – edge (desktop)
    – internet explorer (desktop)

    Can you help to make it compatible with all browsers?

    Thanks

    Plugin Support kellymetal a11n

    (@kellymetal)

    Hi there,

    It looks like Edge and IE require special selectors for the placeholder. Please try changing the CSS to the following:

    
.search-style-with-bg.searchform input[type=text] {
  text-transform: lowercase;
}

.search-style-with-bg.searchform input[type=text]::-webkit-input-placeholder {
  text-transform: initial;
}

.search-style-with-bg.searchform input[type=text]:-ms-input-placeholder {
  text-transform: initial;
}

.search-style-with-bg.searchform input[type=text]::placeholder {
  text-transform: initial;
}

    I tried putting all three placeholder selectors on a single rule (separated by , ) but it did not seem to be working.

    I hope that helps! Have a wonderful day!

    Thread Starter gevcen

    (@gevcen)

    Working perfectly on all modern browsers, except Internet Explorer (but it’s ok as it’s outdated now).

    Thanks

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘WooCommerce Search Label Text-Transform’ is closed to new replies.