Search code examples
jquerycssinputoutlinestroke

Text stroke in <input type="text"/>

I want to use text stroke in <input type="text"/> and I need it to be cross-browser (firefox, google chrome, safari, opera, IE7+).

Is any there any method to do it (CSS 2.1, jQuery...)?

Solution

  • I believe he's speaking about the css property text-stroke (-webkit-text-stroke). This is only properly supported in webkit browsers, so no proper implementation can occur in, for instance, Internet Explorer. However, you can kind of fake it with text-shadow which can work in ie7+. if you MUST have it in ie. See http://css-tricks.com/adding-stroke-to-web-text/

    It would look something like:

    .stroke_text {
    color: white;
    text-shadow:
          -1px -1px 0 #000,
          1px -1px 0 #000,
          -1px 1px 0 #000,
          1px 1px 0 #000;
}

    or for inline:

    <input type='text' 
       style="color: white; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; width:200px; font-size:20px;" />

    The only real drawback of this approach is that the shadow can only be 1px or it starts to look funny, so it's not a perfect replication of text-stroke. That said, you might want to look into conditional css, where browsers that support it use text-stroke, and others use this hacky approach.