Question

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 &amp; 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

No correct solution

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top