Member Avatar for davy_yg

How to change the search text font ?


search.php

<font color = "#A9A9A9">

<form action="<?php echo home_url('/'); ?>">
<input type="text" class="searchbox" name="s" value="type keywords" onFocus="if (this.value=='type keywords')this.value='';" onBlur="if (this.value=='')this.value='type keywords'" />
<input type="image" src="<?php echo get_stylesheet_directory_uri(); ?>/images/searchbutton.png" class="searchbox_submit" value="" />
</form>

</font>

This does not work. So how ?

  • 4 Contributors
  • 3 Replies
  • 75 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by Member #616971

Dani AI

Generated

used a deprecated <font> wrapper and a JavaScript onFocus/onBlur pattern to fake placeholder text. As suggested, styling belongs in CSS. As noticed, your script clears the value on focus — that is why the text disappears. Replace the presentational <font> and the JS placeholder emulation with CSS and the HTML5 placeholder (or keep the JS but still style the input with CSS).

Example CSS to put in your theme stylesheet (or Appearance > Customize > Additional CSS):

/* textbox font and size */
.searchbox {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #333;
}

/* placeholder color (modern browsers + fallbacks) */
.searchbox::placeholder { color: #A9A9A9; opacity: 1; }
.searchbox::-webkit-input-placeholder { color: #A9A9A9; }
.searchbox:-moz-placeholder { color: #A9A9A9; }      /* FF 18- */
.searchbox::-moz-placeholder { color: #A9A9A9; }     /* FF 19+ */
.searchbox:-ms-input-placeholder { color: #A9A9A9; } /* IE 10+ */

Notes and quick troubleshooting:

  • If your current placeholder is implemented as an actual value (the onFocus/onBlur trick), ::placeholder will not affect it. Use the native placeholder attribute instead for consistent styling and accessibility.
  • If your CSS does not seem to take effect, inspect the element with browser devtools to find an overriding rule (theme styles or inline styles). Increase selector specificity or move the rules to the active stylesheet.
  • The HTML <font> element is obsolete; use CSS instead (see MDN on the font element and ::placeholder for details).

References: HTML font element - MDN, ::placeholder - MDN

Recommended Answers

All 3 Replies

Member Avatar for jackbauer24

Explain your question properly.
Plus, it's got some php, so I suggest first check in the php thread for any answers.

Member Avatar for lps

Agree with thepythonguy, please be more specific and detailed which font should be change: either the search form's text or the text of searching result.
I believe both of that can be done by CSS
.class{
font-size:??px;
}

Member Avatar for Member #616971

Are you asking for changing the font style or the text in textbox itself? FYI the text is changing when you focus on textbox.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.