• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1277
  • Last Modified:

adjusting color inside woocommerce product search form field

Hi there.  I am building a site and using the woocommerce framework.  I have changed the inside coloring of the form product search field but need to change out the color inside that text field.  I've tried the following but it's not working:

#s {
background-color: #D6B874;
color: #000000;
}

My link is here: http://149.47.192.189/

Any ideas experts?
0
COwebmaster
Asked:
COwebmaster
2 Solutions
 
COwebmasterAuthor Commented:
tried that but nothing worked.  I have in there:

#s {
background-color: #ff0000;
}

input, select, textarea{
    color: #ff0000;
}

textarea:focus, input:focus {
    color: #ff0000;
}
0
 
Ray PaseurCommented:
This shows how to attach the styling to the id attribute of the search box.  Please see: http://www.laprbass.com/RAY_temp_cowebmaster.php

<?php // RAY_temp_cowebmaster.php
error_reporting(E_ALL);

// CSS STYLING FOR INPUT FIELDS

// CREATE OUR WEB PAGE IN HTML5 FORMAT
$htm = <<<HTML5
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8" />
<title>HTML5 Page in UTF-8 Encoding</title>

<style type="text/css">
#search_field {
    background-color:green;
    color:orange;
}
</style>

</head>
<body>
<div id="search" class="grid_6 prefix_18">
<form action="http://149.47.192.189/" method="get">
<div class="search_box">
<input id="search_field" name="s" type="text" class="inputbox_focus blur pngfix" value="Search..." />
<input type="submit"  value="" class="search-btn pngfix" />
</div>
</form>
</div>
</body>
</html>
HTML5;

// RENDER THE WEB PAGE
echo $htm;

Open in new window

By way of explanation, the # is used in the style sheet to attach style to an id= attribute.   The . (dot) is used to attach style to a class.  Each document can have many duplicate class names, but id names must be unique.

This will get much easier if your document validates correctly!
http://validator.w3.org/check?uri=http%3A%2F%2F149.47.192.189%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
COwebmasterAuthor Commented:
Okay, i've had to use this to get the text color to change when the mouse clicks inside the textfield:

#searchform #s {
background-color: #D6B874;
color: #000;
}

However, what can I add to the editor so that the text color is also #000? Right now it appears gray.
0
 
ScorchDCommented:
You need to style the placeholder text specificaly for that so

::-webkit-input-placeholder {color: #000;}
:-moz-placeholder {color: #000;}
::-moz-placeholder {color: #000;}
:-ms-input-placeholder {color: #000;}

Open in new window

0
 
COwebmasterAuthor Commented:
That worked, thanks!
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now