Reputation: 21
All-One-Cufon currently, will to change to other ttf font replacement..
When using the All-One-Cufon plugin I am find that the cufon code can't replace the placeholder with the same html5 code that would normal be used to change color:
#rightHalf input::-webkit-input-placeholder {
color: #f9a11b;
}
#rightHalf input:-moz-placeholder {
color: #f9a11b;
}
#rightHalf input:-ms-input-placeholder {
color: #f9a11b;
}
Cufon Code:
Cufon.replace('#rightHalf input::-webkit-input-placeholder');
Cufon.replace('#rightHalf input:-moz-placeholder');
Cufon.replace('#rightHalf input:-ms-input-placeholder');
This did not work. Neither did attempting to target the input:
HTML:
<input type="text" class="field" name="s" id="s" placeholder="Search for Products, Services & Supplier ">
Cufon Code:
Cufon.replace('#s');
Resulting In:
<input type="text" class="field" name="s" id="s" placeholder="Search for Products, Services & Supplier ">
<cufon class="cufon cufon-canvas" alt=" " style="width: 3px; height: 12px; ">
<canvas width="15" height="14" style="width: 15px; height: 14px; top: -1px; left: -2px; "></canvas><cufontext></cufontext></cufon>
<input type="submit" class="submit" name="submit" id="searchsubmit" value="Search"></form>
Failure and messes up spacing...
CSS (fontFamily on cufon JS set to "arialnarrow"):
font-family: 'arialnarrow';
and
font: arialnarrow;
and
font-family: 'arialnarrow' !important;
and
font: arialnarrow !important;
did nothing... as I anticipated, seeing as the cufon adds html to change the texts appearance and the placeholder is within an input, targetable by css and not html..
Does anyone know how I could do this?? Font replacement for placeholders from ttf fonts??
Arial Narrow for Gonzit.com <-- top search bar placeholder text needs to be replaced..
Any help is appreciated, need to close ASAP!!
Ted
Upvotes: 2
Views: 376