Input vacío con CSS

5/Jul/2017 246

Reto: diseñador envió una interfaz donde un color diferente no sólo al placeholder, sino al background-color del mismo input como se ve a continuación:

Screen Shot 2017-07-05 at 09.42.26

Me dije:

OK, puedo cambiarle el color al texto del placeholder pero no conozco una propiedad CSS que me diga si el input está vacío para darle el color de fondo al input. Y no quiero meter JS sólo para eso. Investigaré.

:placeholder-shown

Esta propiedad es aún un Working Draft pero actualmente tiene soporte para Firefox, Chrome, Safari, Opera y los browsers móviles más populares. Si, IE no está soportado aún pero qué diablos.

A continuación, el CSS con el cual logré lo que el diseño se proponía:

input {
  display: block;
  width: 100%;
  padding: .6em .8em;
  margin-bottom: .5em;
  font-size: 1.1em;
  color: #1C2E36;
  border: 1px solid #D6E1E4;
}

input:focus {
  border-color: #00BA68;
  background-color: #FAFBFC;
  outline: 0;
}

input:placeholder-shown {
  background-color: #FAFBFC;
}

input::-webkit-input-placeholder {
  color: #A4B3B7;
}

JS Bin on jsbin.com

Links:

Comentarios

  1. side effects of hydroxychloroquine [#]

    chlorquine https://chloroquineorigin.com/# – hydroxychloroquine plaquenil anti-malaria drug chloroquine clonidin

  2. Izupli [#]

    buy vardenafil with paypal – vardenafil kaufen vardenafil free trial offerbuy vardenafil

  3. Nhjqzl [#]

    pharmacy online order vardenafil men – want to buy vardenafil buy vardenafil vardenafil

  4. blue chew viagra [#]

    Hello Dear, are you truly visiting this site on a regular basis, if so then you will definitely obtain nice knowledge. http://cavalrymenforromney.com/

  5. Fcifpu [#]

    generic vardenafil 20 mg – viagra vs cialis vardenafil generic vardenafil from india

  6. Ofwucz [#]

    vardenafil paypal – generic vardenafil india buy vardenafil online australia

  7. generic viagra 100mg price [#]

    Ahaa, its nice dialogue concerning this article at this place at this weblog,
    I have read all that, so at this time me also commenting at
    this place. http://droga5.net/

  8. Mexswy [#]

    canadian pharmacy sarasota – canadian pharmacy generic levitra canadian pharmacy cialis 5mg

  9. Fuwnph [#]

    walgreens online pharmacy – viagra canadian pharmacy best canadian online pharmacy

  10. is vidalista covered by medicare [#]

    Thanks for sharing your thoughts on vidalista.
    Regards http://vidalista.buszcentrum.com/

  11. Scgitt [#]

    tadalafil 5 mg coupon – tadalafil online without a script mypharmacy

  12. Etexna [#]

    tadalafil 20mg lowest price – tadalafil pills price cialis pills 5mg

  13. buy zentiva hydroxychloroquine [#]

    I am regular visitor, how are you everybody? This article posted
    at this web site is genuinely pleasant. http://hydroxychloroquined.online/

  14. tadalafil generic over the counter [#]

    great points altogether, you simply gained a brand new reader.
    What might you suggest in regards to your publish that you just made some days
    in the past? Any certain? https://atadalafil.online/

  15. zithromax price [#]

    Do you have a spam problem on this blog; I also am a blogger,
    and I was wondering your situation; we have developed some
    nice methods and we are looking to swap solutions
    with other folks, be sure to shoot me an e-mail if interested. http://antiibioticsland.com/Zithromax.htm

  16. Nrjsgf [#]

    generic viagra professional – where can i buy viagra in canada female viagra tablets price in india

  17. Bzmipw [#]

    viagra 100 mg – buy generic viagra online without prescription genuine viagra australia

  18. Zqfsha [#]

    buy levitra vardenafil – vardenafil generic date order levitra

  19. Yaklek [#]

    cialis vardenafil online – buy vardenafil in india order vardenafil generic

  20. erythromycin dose for acne [#]

    Can I simply just say what a comfort to find an individual who genuinely understands
    what they’re talking about on the net. You actually realize how
    to bring an issue to light and make it important. More people really need to
    read this and understand this side of the story.

    It’s surprising you’re not more popular since you certainly possess the gift. http://antiibioticsland.com/Erythromycin.htm

  21. Uzpojk [#]

    vardenafil dose – vardenafil 20 mg buy real vardenafil online

  22. Eqjnnr [#]

    vardenafil generic – buy vardenafil overnight shipping vardenafil 40mg

  23. Xwlzbv [#]

    stromectol 15 mg – stromectol oral ivermectin 1%cream

  24. Rxkmhc [#]

    buy stromectol 6mg – buy stromectol online uk ivermectin 1% cream generic

  25. buy chloroquine online uk [#]

    I think this is among the most significant info for me. And i’m glad reading your
    article. But want to remark on some general things,
    The website style is perfect, the articles is really great : D.
    Good job, cheers https://www.herpessymptomsinmen.org/where-to-buy-hydroxychloroquine/

  26. Najtfy [#]

    price generic viagra – price viagra generic cheap viagra uk paypal

  27. Bmykas [#]

    viagra 25mg price – viagra 2 online pharmacy for viagra

  28. ivermectin 3mg tablets sale [#]

    Hello there, I found your web site by means of Google whilst
    looking for a similar matter, your site got here up, it
    seems to be great. I have bookmarked it in my google bookmarks.

    Hi there, just was alert to your weblog via Google, and located
    that it is truly informative. I’m gonna watch out for
    brussels. I will appreciate if you happen to proceed this in future.

    Many people shall be benefited out of your writing.

    Cheers! http://herreramedical.org/ivermectin

  29. Ytihto [#]

    tadalafil 20mg – cialis 60mg online what is the cost of cialis

  30. Ezwmgk [#]

    cheap cialis in australia – online cialis india online cialis sales

  31. Garcheedarap [#]

    advair 50

  32. acyclovir 2000 mg [#]

    Great article, exactly what I wanted to find. https://www.herpessymptomsinmen.org/productacyclovir/

  33. resistance to azithromycin [#]

    Hello, i read your blog occasionally and i own a similar
    one and i was just wondering if you get a lot of spam responses?
    If so how do you prevent it, any plugin or anything you can suggest?
    I get so much lately it’s driving me mad so any support
    is very much appreciated. http://herreramedical.org/azithromycin

  34. Pzmccg [#]

    buy prednisone 10mg – where to buy prednisone 5443 without prescription best price for prednisone

  35. Wdbevi [#]

    generic prednisone 40mg online – prednisone 12.5 mg prednisone canada prescription

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

CSSLab