0

Is there a way to allow user to search placeholder text using the "find in page" browser function?

I understand I can just add elements with zero height that contain placeholder text, but that seems like a hacky solution. Perhaps something using CSS pseudoclasses?

edit: I should mention, so far this is only an issue on Chrome for iOS(10.0.2)

the code is very simple:

<input type="text" placeholder="First Name">

Here's the screenshot of Chrome: chrome on iOS find-in-page

This is what I get when I search for 'first'

chrome fail

ierdna
  • 5,753
  • 7
  • 50
  • 84
  • Check this link:-https://css-tricks.com/almanac/selectors/p/placeholder-shown/ – Razia sultana Oct 19 '16 at 13:37
  • that allows me to highlight an input element, but using "find in page" still won't find it. for example, if that element is way down the page out of user's view. – ierdna Oct 19 '16 at 13:45
  • Please provide jsfiddle exectly what you want? – Razia sultana Oct 19 '16 at 13:50
  • @Raziasultana your code is fine, but open it in Chrome on iOS 10 and try searching for what's in the placeholder using 'find in page' option – ierdna Oct 19 '16 at 15:52
  • @andrei Do you want to create a bug against Chrome for iOS? If so follow this link below and report. https://bugs.chromium.org/p/chromium/issues/entry?summary=Issue%20Summary&comment=App%20Version%20(from%20%22Chrome%20Settings%20%3E%20About%20Chrome%22):%20%0DiOS%20Version:%20%0DDevice:%20%0D%0DSteps%20to%20reproduce:%20%0D%0DObserved%20behavior:%20%0D%0DExpected%20behavior:%20%0D%0DFrequency:%20%0D%3Cnumber%20of%20times%20you%20were%20able%20to%20reproduce%3E%20%0D%0DAdditional%20comments:%20%0D&labels=Type-Bug,OS-iOS,Pri-2 – Srikanth Oct 20 '16 at 14:05

1 Answers1

0

input {
  font-size: 1.5rem;
  margin: 10px;
  padding: 10px;
  width: 65%;
}
input:placeholder-shown {
  border: 5px solid red;
}
<form>
  
  <input type="text" placeholder="Placeholder text" value="Currently has a value (not showing placeholder).">
  
  <input type="text" placeholder="Currently has no value (showing placeholder).">
  
</form>
Razia sultana
  • 2,168
  • 3
  • 15
  • 20