Changing font using css code

  • Resolved urielc

    (@urielc)


    9 years, 11 months ago

    Hey.

    I managed to change the font type and color when typing, using css code.
    Its working great on all browsers.

    But, when I try to change the font type and color of the “type here” text (the text that you see before start typing), it’s not taking effect on chrome.

    In Firefox & IE the change taking effect, but in chrome it’s not.

    It’s look like the chrome still using it’s own setings of fonts, but only in that elemnet.

    Can I force chrome to use my own font & color based on the css code?

    This is the css code that I use on my site:

    .wpdreams_asl_container *, .wpdreams_asl_results * {
    font-size: 16px !important;
    font-family: alef, sans-serif, arial !important;
    direction: rtl;
    text-align: right !important;
    }

    div[id*=”ajaxsearchlite”] .probox .proinput input::-moz-placeholder {
    font-family: alef, sans-serif, arial !important;
    color: rgb(59, 169, 189) !important;
    font-weight: bold;
    font-size: 15px;
    }

    #ajaxsearchlite1 .probox .proinput input, div[id*=”ajaxsearchlite”] .probox .proinput input {
    font-weight: bold;
    font-family: alef, sans-serif, arial !important;
    color: rgb(59, 169, 189) !important;
    font-size: 16;
    line-height: normal !important;
    }

    #ajaxsearchlite1 .probox, div[id*=”ajaxsearchlite”] .probox {
    border: transparent;
    }

    Thanks!

    https://ww.wp.xz.cn/plugins/ajax-search-lite/

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author wpdreams

    (@wpdreams)

    9 years, 11 months ago

    Hi!

    You did a great job, there is one more thing you need though. Setting placeholder styles needs a special CSS code, otherwise it won’t work properly.

    I believe this should solve your problems: 

    input.orig::-webkit-input-placeholder {
  font-weight: bold;
  font-family: alef, sans-serif, arial !important;
  color: rgb(59, 169, 189) !important;
  font-size: 16;
  line-height: normal !important;
}

input.orig:-moz-placeholder { /* Firefox 18- */
  font-weight: bold;
  font-family: alef, sans-serif, arial !important;
  color: rgb(59, 169, 189) !important;
  font-size: 16;
  line-height: normal !important;
}

input.orig::-moz-placeholder {  /* Firefox 19+ */
  font-weight: bold;
  font-family: alef, sans-serif, arial !important;
  color: rgb(59, 169, 189) !important;
  font-size: 16;
  line-height: normal !important;
}

input.orig:-ms-input-placeholder {
  font-weight: bold;
  font-family: alef, sans-serif, arial !important;
  color: rgb(59, 169, 189) !important;
  font-size: 16;
  line-height: normal !important;
}

    I have found this solution a long time ago on google, and so far it always worked 🙂

    Thread Starter urielc

    (@urielc)

    9 years, 11 months ago

    So,
    First of all, thank you for your detailed answer!
    I realy appreciate it.

    I’ve tried your code, but it doesn’t work 🙁

    BUT,
    Your code inspired me 🙂

    So I did a little research about “placeholder”, and I managed to write this code:

    div[id*=”ajaxsearchlite”] .probox .proinput input.orig::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    font-weight: bold;
    font-family: alef, sans-serif, arial !important;
    color: rgb(59, 169, 189) !important;
    font-size: 16;
    line-height: normal !important;
    }

    And it’s working great on all browsers, including Chrome!
    This is great, you made my day.

    Thanks!

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Changing font using css code’ is closed to new replies.