I have figured out several places and ways to change the actual text, but can't seem to figure out how to change the color of the text. Any help would be appreciated.
Hi TheDudeClassic
Assuming you are using the new responsive reference design og a design that extends from it, you need to change the placeholder color. You can do that with the folllowing code.
#search::-webkit-input-placeholder { color: #0000ff; } /* Firefox 19+ */ #search::-moz-placeholder { color: #0000ff; }
/* Internet Explorer */ #search:-ms-input-placeholder { color: #0000ff; }
Hope it helps :-)
I accidently double posted and don't see an option to delete this one.
I am pretty new to Magento, I have learned a ton in the last month or so, but I still do not understand how to do a lot of things. The code you provide above is unlike anything I have come across before and I wouldn't even know where to put it.
I am using Magento 1.9 with a theme called Grayscale Full-width responsive. I know that the text for the search box is located in form.mini.phtml (specific code copied below) - but first I am unclear how to change the color with this format. I tried sticking a #"color code" in but either I am putting it in the wrong place or using the wrong format. Second, I had been hoping there was a way to change it either in styles.css, color.css or local.xml file so that when an update comes along it won't wipe out my changes, since the only place I can find the form.mini.phtml file is under app/design/frontend/base/default/template/catalogsearch/
There is not a similar file in my theme folder, so I am assuming they are defaulting to the base code.
<script type="text/javascript">//<![CDATA[var searchForm = new
Varien.searchForm('search_mini_form', 'search', '<?php echo $this->__
('Search entire store here...') ?>');searchForm.initAutocomplete('<?php
echo $catalogSearchHelper->getSuggestUrl() ?>', 'search_autocomplete');//]]>
I've solved this myself. Hopefully it will help someone else. If you go to skin/frontend/default/YourTheme/css/ and open styles.css and add or change this line: .header .form-search input.input-text {float: right;color:#08a0ff;} adding or changing the color to what you want. In my case I had to add the color:#08a0ff; part to this line. Had a color already been in there I would have figured it out sooner.
Javascript :
jQuery("#search_mini_form").ready(function() { function updateSearchMiniFormPlaceholder(jq) { var emptyText = jQuery("#search_mini_form").first().attr('data-tip'); var val = jq.val(); if (val == '' || val == emptyText) { jq.addClass("placeholder"); } else { jq.removeClass("placeholder"); } } jQuery("#search_mini_form #search").each(function() { updateSearchMiniFormPlaceholder(jQuery(this)); }); jQuery("#search_mini_form #search").blur(function(ev) { updateSearchMiniFormPlaceholder(jQuery(this)); }); jQuery("#search_mini_form #search").focus(function(ev) { jQuery(this).removeClass("placeholder"); }); });
CSS:
#search.placeholder { color: #757575; }