831 posts
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 4-5 years
  • Referred between 1 and 9 users
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Sold between 1 000 and 5 000 dollars
  • United States
tigerlabs says

Hey guys,

Is there a way to put a gradient on input text? It only has to work with firefox.

Example: http://twitpic.com/2a7jp8/full

Thanks!

444 posts
  • Bought between 1 and 9 items
  • Exclusive Author
  • Has been a member for 4-5 years
  • United Kingdom
TahaH-Studio says
831 posts
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 4-5 years
  • Referred between 1 and 9 users
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Sold between 1 000 and 5 000 dollars
  • United States
tigerlabs says

Aw, didn’t help. I’m looking for a way to apply a gradient to the text in the input itself. :)

1734 posts
  • Exclusive Author
  • Won a Competition
  • Sold between 5 000 and 10 000 dollars
  • Has been a member for 4-5 years
  • Referred between 1 and 9 users
  • Bought between 1 and 9 items
VisualSharing says
Hopefully this will help http://www.webdesignerwall.com/tutorials/css-gradient-text-effect/

I’m not sure this will work on input fields, it requires a span inside.

@tigerthemes: Maybe this: http://labs.dragoninteractive.com/rainbows.php ?

831 posts
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 4-5 years
  • Referred between 1 and 9 users
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Sold between 1 000 and 5 000 dollars
  • United States
tigerlabs says

cmt, that’s what I tried first and it didn’t work. I’ve been trying to find a solution for hours, and haven’t found anything. :(

444 posts
  • Bought between 1 and 9 items
  • Exclusive Author
  • Has been a member for 4-5 years
  • United Kingdom
TahaH-Studio says
Hopefully this will help http://www.webdesignerwall.com/tutorials/css-gradient-text-effect/

I’m not sure this will work on input fields, it requires a span inside.

@tigerthemes: Maybe this: http://labs.dragoninteractive.com/rainbows.php ?

Well, I think its possible if u sort your from the way I did below

<form action="">
    <ul>
        <li>
            <span></span>
            <input name="username" type="text" id="username" value="passwork" />
        </li>
        <li>
            <span></span>
            <input type="submit" value="password" />
        </li>
    </ul>
</form>

the only issue that you will face is that the text wont be selectable but i think it could be fixes using .click funtion in jQuery

1182 posts
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 4-5 years
  • Referred between 1 and 9 users
campolar says

You could use jquery to add span tags around the text typed into the input box. And use the span gradient technique. I’m not sure if this is possible tho

382 posts
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 5-6 years
  • Referred between 1 and 9 users
  • Sold between 10 000 and 50 000 dollars
  • United States
blabus says

Perhaps look into a content-editable DIV as opposed to an input field.

186 posts
  • Bought between 100 and 499 items
  • Contributed a Tutorial to a Tuts+ Site
  • Elite Author
  • Exclusive Author
  • Has been a member for 4-5 years
  • Sold between 50 000 and 100 000 dollars
Artillegence says
by
by
by
by
by
by