selects con estilo

24/Mar/2015 2205

Estamos en pleno año 2015, la humanidad está trabajando para llevar humanos a Marte y todavía no podemos dar estilos CSS crossbrowsing a las etiquetas <select> Y para qué mencionar los <input type=»checkbox»> y <input type=»radio»>

A pesar de existir plugins y artimañas que lo permitan, siempre he recomendado dejar los estilos por defecto de los elementos de formularios, ya que por años han sigo bloqueadores de la conversión. Por su importancia, los formularios deben tener los menos impedimentos posibles a la hora de que el usuario llene el campo, y la incompatibilidad ó mal aplicación de un diseño a estos campos suelen ser una de las principales causas de rebote en la conversiones. El usuario quiere responder o seleccionar un campo, y éste no funciona o al click no queda seleccionado. Frustración aparte, despídete de los datos de ese usuario.

En el presente, teniendo IE11 como browser por defecto de Microsoft, Chrome / Opera compartiendo un mismo motor de render y Firefox con cada vez más frecuentes actualizaciones, podemos respirar más tranquilos y entregar estilos CSS directo al elemento <select> sin preocuparse de utilizar algún plugin, eso sí siempre y cuando el soporte mínimo sea IE9+. Para IE8 y menores aún deberás tomar una decisión: no le doy diseño personalizado, ó agrego esfuerzo aplicando un plugin como Chosen ó Selectric.

Vamos al asunto: dado un <select><option value=»»></select>, existen 2 técnicas dependiendo del diseño que se le vaya a aplicar: con una imagen de fondo, o sin (puro CSS si el diseño lo permite):

<div class="select">
  <select>
    <option value="">Seleccione uno:</option>
    <option value="opcion-1">Opción 1</option>
    <option value="opcion-2">Opción 2</option>
    <option value="opcion-n">Opción N</option>
  </select>
</div>

IE 9 no permite remover la flecha por defecto del campo <select>, entonces lo que hacemos es darle rodear el <select> con un contenedor, el que tiene un ancho menor (el <select> tendrá un width: 130%;) y con eso esconderemos la flecha ya que estará fuera del contenedor del <select>. Para el resto de los browsers, deberemos limpiar el estilo por defecto del <select> mediante la propiedad CSS appearance: none; (con prefix) para luego aplicar el diseño:

Técnica 1: con imagen de fondo

.select {
  border: 1px solid #ccc;
  width: 140px;
  overflow: hidden;
  background: #fff url("arrowdown.gif") no-repeat 90% center;
}
  .select select {
    padding: 5px 8px;
    width: 130%;
    border: none;
    box-shadow: none;
    background-color: transparent;
    background-image: none;
    appearance: none;
  }

Técnica 2: puro CSS

Suponiendo el diseño es sencillo, simple y orientado a la conversión, basta que el <select> tenga un fondo y un borde de color sólido y la bendita flecha / triángulo que siempre será útil. Para hacer triángulos con CSS uso mi mixin en LESS ó un generador de triángulos CSS:

.select {
  position: relative;
  border: 1px solid #ccc;
  width: 120px;
  overflow: hidden;
  background-color: #fff;
}
  .select:before {
    content: '';
    position: absolute;
    right: 5px;
    top: 7px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 7px 5px 0 5px;
    border-color: #000000 transparent transparent transparent;
    z-index: 5;
    pointer-events: none;
  }
  .select select {
    padding: 5px 8px;
    width: 130%;
    border: none;
    box-shadow: none;
    background-color: transparent;
    background-image: none;
    appearance: none;
  }

Comentarios

  1. cialis online [#]

    cheap cialis cialis 20 mg

  2. soygies [#]

    https://prednisonebuyon.com/ – prednisolone eye drops cost

  3. Dwergyker [#]

    http://buyneurontine.com/ – gabapentin 50mg

  4. Dwergyker [#]

    https://buyneurontine.com/ – neurontine

  5. BradleyShush [#]

    samples of viagra and cialis zegerid samples for healthcare professionals buy viagra pills canada cialis usage tips best way to use cialis all samples for healthcare providers

  6. finasteride drug interaction with dapoxetine [#]

    It’s appropriate time to make a few plans for the long run and it is time
    to be happy. I’ve learn this put up and if I could I
    desire to counsel you some interesting things
    or advice. Maybe you could write next articles referring to this article.
    I want to read more issues approximately it! http://herreramedical.org/dapoxetine

  7. GazPlaymn [#]

    cialis tablets 20mg australia

  8. availability of hydroxychloroquine in usa [#]

    Hey! I know this is kinda off topic but I’d figured I’d
    ask. Would you be interested in trading links or maybe guest authoring a blog post or
    vice-versa? My site discusses a lot of the same
    topics as yours and I think we could greatly benefit from each other.

    If you might be interested feel free to send me an e-mail.
    I look forward to hearing from you! Excellent blog by the
    way! http://herreramedical.org/chloroquine

  9. Neurontine [#]

    Does Generic Viagra Really Work

  10. Keithhex [#]

    long term flomax side effects viagra pictures of pills online sildenafil canada fda approved medications for alcoholism male enhancement pills cialis

  11. Rodolfoarods [#]

    how viagra affects the body check prices at walmart sildenafil citrate tablets ip 100 mg erectile dysfunction pills at walgreens what causes low libido in men

  12. stromectolforte.com [#]

    ivermectin https://stromectolforte.com/ ivermectin buy ivermectin

  13. stromectolforte.com [#]

    ivermectin tablets https://stromectolforte.com/ sztromektolt vГЎsГЎrolni ivermectina dosis en humanos

  14. gabapentin 600 [#]

    Cure For Ed

  15. website [#]

    website

    Development of websites, mobile applications, portals and online stores

  16. Dwergyker [#]

    http://buyneurontine.com/ – gabapentin dosage

  17. stromectolforte.com [#]

    how to buy stromectol http://stromectolforte.com/ ivermectin without doctor prescription ivermectin

  18. Bigg Boss 5 Telugu [#]

    Looking forward to reading more. Great blog article.Really thank you! Cool.

  19. supreme new york [#]

    I would like to show my appreciation for your generosity giving support to all those that need help with this important situation. Your personal dedication to getting the message throughout has been quite important and have all the time empowered many people much like me to realize their objectives. Your amazing interesting key points indicates much a person like me and much more to my peers. Warm regards; from everyone of us.

  20. cheap jordans [#]

    I simply wanted to send a comment to appreciate you for all the awesome guidelines you are posting on this site. My rather long internet research has finally been recognized with really good know-how to write about with my great friends. I ‘d mention that most of us site visitors actually are very endowed to dwell in a perfect place with many marvellous professionals with beneficial principles. I feel very fortunate to have discovered your web pages and look forward to some more cool minutes reading here. Thank you once more for all the details.

  21. kd shoes [#]

    I together with my guys have been analyzing the nice helpful tips found on your site and at once I got a horrible feeling I had not thanked the web blog owner for those strategies. The young men had been excited to read all of them and now have honestly been having fun with those things. I appreciate you for actually being considerably thoughtful and also for obtaining variety of ideal areas millions of individuals are really needing to know about. My personal honest apologies for not saying thanks to sooner.

  22. supreme clothing [#]

    I needed to put you this bit of remark so as to thank you over again for these awesome guidelines you have shared in this article. This is really extremely generous of you giving extensively just what numerous people could have made available for an e-book to make some profit on their own, primarily seeing that you might well have tried it in case you decided. These good tips additionally acted like the good way to be certain that someone else have similar interest just like mine to grasp much more with respect to this condition. I’m sure there are many more pleasant times up front for many who scan your website.

  23. supreme [#]

    I have to point out my passion for your kind-heartedness for folks that actually need help on this one situation. Your personal commitment to passing the solution all through was especially informative and have usually made employees just like me to arrive at their dreams. Your own invaluable information means a great deal a person like me and further more to my peers. Warm regards; from all of us.

  24. supreme clothing [#]

    I want to show thanks to you for bailing me out of this particular challenge. Just after scouting throughout the internet and obtaining proposals which are not powerful, I believed my entire life was well over. Existing without the answers to the difficulties you have resolved all through this website is a serious case, and those which might have in a negative way affected my career if I hadn’t noticed the blog. Your good talents and kindness in dealing with the whole lot was very useful. I’m not sure what I would have done if I hadn’t encountered such a point like this. I can also at this point relish my future. Thank you very much for your professional and amazing help. I will not think twice to suggest your web page to any individual who should have recommendations about this matter.

  25. hermes belts [#]

    Thank you a lot for providing individuals with an exceptionally special possiblity to read critical reviews from this web site. It really is very excellent plus packed with a lot of fun for me and my office fellow workers to visit your site no less than three times a week to see the new items you have. And of course, we’re certainly fulfilled with the striking knowledge you serve. Certain 4 ideas in this posting are essentially the simplest we have ever had.

  26. my lowes life [#]

    my lowes life

    […]The details mentioned inside the post are a few of the very best available […]

  27. Teodault [#]

    buy doxycycline south africa

  28. information on ivermectin [#]

    information on ivermectin

    selects con estilo | CSSLab | Laboratorio de ideas web

  29. FritzUnali [#]

    generic viagra india price cialis samples order cialis cartoons about viagra sildenafil tablets 100 mg

  30. provigil100mg [#]

    provigil online provigil online

  31. prednisoloneforcats [#]

    prednisone no rx interactions for prednisone

  32. Miadault [#]

    ivermectin 3

  33. oral ivermectin for scabies [#]

    oral ivermectin for scabies

    selects con estilo | CSSLab | Laboratorio de ideas web

  34. fetezovu [#]

    trimethoprim ss sulfameth trimethoprim 800 160 tb

  35. GaloPlaymn [#]

    buy zithromax online no prescription

CSSLab