Publicidad

Autor Tema: Estilo de un cuadro de selección Usando Sólo CSS  (Leído 2021 veces)

Desconectado marcatsol

  • Full Member
  • ***
  • Mensajes: 153
  • Power: 25
  • Sexo: Masculino
  • Vamos con todo spirate 2.4
    • Ver Perfil
    • Spirate 2.4 Muy Pronto!!!
    • Email
Estilo de un cuadro de selección Usando Sólo CSS
« en: Marzo 21, 2012, 12:24:45 am »

Estaba por darles unos toques a mi web, y se me ocurre mejorar los cuadros de seleccion, pero no sabia que onda, pensaba que algo de php (no se mucho), pero me puse averiguar como facilmente utilizando sólo CSS se obtenia unos diseños elegantes, les comparto mi experiencia y como utilizarlo.

Así es como una caja de selección se verá por defecto:

code para el template:
Código: [Seleccionar]
<select>
<option>Spirate 2.0</option>
<option>Spirate 2.3</option>
<option>Spirate 2.4</option>
</select>

solo con css

Código: [Seleccionar]
<div class="styled-select select">
<select>
<option>Radio Spirate</option>
<option>Foro</option>
<option>Portada</option>
</select>
</div>

esto para el estilos-sp.css:
Código: [Seleccionar]
.styled-select select {
   background: transparent;
   width: 268px;
   padding: 5px;
   font-size: 16px;
   border: 1px solid #ccc;
   height: 34px;
}


css + imagen:

Código: [Seleccionar]
<div class="styled-select">
<select>
<option>Radio Spirate</option>
<option>Foro</option>
<option>Portada</option>
</select>
</div>

para el css:

Código: [Seleccionar]
.styled-select {
   width: 240px;
   height: 34px;
   overflow: hidden;
   background: url(new_arrow.jpg) no-repeat right #ddd;
}

Espero y les sea de utilidad y aprendizaje para todos los principiantes...

Desconectado Sir_German

  • Hero Member
  • *****
  • Mensajes: 567
  • Power: 144
  • Sexo: Masculino
  • Germancho!!! ?
    • Ver Perfil
    • http://www.descargatelofree.net
    • Email
Re:Estilo de un cuadro de selección Usando Sólo CSS
« Respuesta #1 en: Marzo 21, 2012, 12:46:11 am »
che esto me gusto pero como hacer para poner los link?? gracias!!

Desconectado kingworld

  • Sr. Member
  • ****
  • Mensajes: 291
  • Power: 34
  • Sexo: Masculino
  • :P aguante spirate for ever
    • Ver Perfil
    • ArgLinux - Todo OpenSource
Re:Estilo de un cuadro de selección Usando Sólo CSS
« Respuesta #2 en: Marzo 21, 2012, 01:09:53 am »
ger podrías hacerlo así:
Código: [Seleccionar]
<div class="styled-select select">
<select name="forma" ONCHANGE="location = this.options[this.selectedIndex].value;">
 <option value="feo.php">Tu :f</option>
 <option value="refeo.php">Luis</option>
 <option value="kapo.php">BPsys</option>
</select>
</div>


Con dios todo lo puedes ;)

Desconectado Santos

  • No soy
  • Project Manager
  • *
  • Mensajes: 4768
  • Power: 459
  • Sexo: Masculino
  • Get up, stand up, don't give up the fight.
    • Ver Perfil
    • Email
Re:Estilo de un cuadro de selección Usando Sólo CSS
« Respuesta #3 en: Marzo 21, 2012, 01:25:40 am »
Muy buenos, super practicos. +1

Desconectado marcatsol

  • Full Member
  • ***
  • Mensajes: 153
  • Power: 25
  • Sexo: Masculino
  • Vamos con todo spirate 2.4
    • Ver Perfil
    • Spirate 2.4 Muy Pronto!!!
    • Email
Re:Estilo de un cuadro de selección Usando Sólo CSS
« Respuesta #4 en: Marzo 21, 2012, 01:26:30 am »
che esto me gusto pero como hacer para poner los link?? gracias!!

No se si te refieras a un menu desplegable, si es asi esto te va servir.  Si no es asi  kingworld dejo un ejemplo que te puede servir

esto es para tu template
Código: [Seleccionar]
<ul class="menu">
   <li><a href="#">opcion 1</a> <ul>
         <li><a href="tu links">una a</a></li>
         <li><a href="tu links">una b</a></li>
      </ul>
   </li>
   <li>opcion 2   <ul>
         <li><a href="tu links">una c </a><ul>
               <li><a href="tu links">otra</a></li>
               <li><a href="tu links">mas</a></li>
            </ul>
         </li>
         <li><a href="tu links">una d</a></li>
      </ul>
   </li>
</ul>

esto va para estilos-sp.css

Código: [Seleccionar]
ul.menu
{
   list-style:none;
}
ul.menu ul /* Para todos los ul debajo del ul.menu */
{
   display:none;
   list-style:none;
}

demo:


Lo que yo postie, es para las cajas de seleccion de spirate como:
categorias:

pais cuando se registran

sexo:


espero haber aclarado esto.
saludos

Desconectado Sir_German

  • Hero Member
  • *****
  • Mensajes: 567
  • Power: 144
  • Sexo: Masculino
  • Germancho!!! ?
    • Ver Perfil
    • http://www.descargatelofree.net
    • Email
Re:Estilo de un cuadro de selección Usando Sólo CSS
« Respuesta #5 en: Marzo 21, 2012, 01:53:14 am »
Esto me gusto!!! +1

Desconectado marcatsol

  • Full Member
  • ***
  • Mensajes: 153
  • Power: 25
  • Sexo: Masculino
  • Vamos con todo spirate 2.4
    • Ver Perfil
    • Spirate 2.4 Muy Pronto!!!
    • Email
Re:Estilo de un cuadro de selección Usando Sólo CSS
« Respuesta #6 en: Marzo 21, 2012, 02:16:43 am »
@santyyx
Gracias por el comentario, el +1 fue falso, = se te paso.
@Sir_German
Gracias por tu comentario y el +1
@kingworld
Tu = gracias por tu comentario, ahora no quiero debatir sobre php por que no se mucho, si el debate va para css, no hay problema (me refiero lo que dijiste en el chat)
« última modificación: Marzo 21, 2012, 02:51:32 am por marcatsol »

Desconectado Santos

  • No soy
  • Project Manager
  • *
  • Mensajes: 4768
  • Power: 459
  • Sexo: Masculino
  • Get up, stand up, don't give up the fight.
    • Ver Perfil
    • Email
Re:Estilo de un cuadro de selección Usando Sólo CSS
« Respuesta #7 en: Marzo 21, 2012, 02:19:12 am »
@santyyx
Gracias por el comentario, el +1 fue falso, = se te paso.
@Sir_German
Tu = gracias por tu comentario, ahora no quiero debatir sobre php por que no se mucho, si el debate va para css, no hay problema (me refiero lo que dijiste en el chat)
@kingworld
Gracias por tu comentario y el +1

Quería ver si estabas atento (?  xD

Desconectado marcatsol

  • Full Member
  • ***
  • Mensajes: 153
  • Power: 25
  • Sexo: Masculino
  • Vamos con todo spirate 2.4
    • Ver Perfil
    • Spirate 2.4 Muy Pronto!!!
    • Email
Re:Estilo de un cuadro de selección Usando Sólo CSS
« Respuesta #8 en: Marzo 21, 2012, 02:23:06 am »
@santyyx
Gracias por el comentario, el +1 fue falso, = se te paso.
@Sir_German
Tu = gracias por tu comentario, ahora no quiero debatir sobre php por que no se mucho, si el debate va para css, no hay problema (me refiero lo que dijiste en el chat)
@kingworld
Gracias por tu comentario y el +1

Quería ver si estabas atento (?  xD
jaja

Desconectado kingworld

  • Sr. Member
  • ****
  • Mensajes: 291
  • Power: 34
  • Sexo: Masculino
  • :P aguante spirate for ever
    • Ver Perfil
    • ArgLinux - Todo OpenSource
Re:Estilo de un cuadro de selección Usando Sólo CSS
« Respuesta #9 en: Marzo 21, 2012, 02:41:25 am »
me olvide el +1 XD es que comente a las apuradas haber si lo meto en mi web


Con dios todo lo puedes ;)

Desconectado JorgeDRB

  • VIP
  • *
  • Mensajes: 461
  • Power: 48
  • Sexo: Masculino
  • Diseñador grafico
    • MSN Messenger - jorgegaona77@hotmail.com
    • Ver Perfil
    • Email
Re:Estilo de un cuadro de selección Usando Sólo CSS
« Respuesta #10 en: Marzo 21, 2012, 04:02:29 am »

Desconectado marcatsol

  • Full Member
  • ***
  • Mensajes: 153
  • Power: 25
  • Sexo: Masculino
  • Vamos con todo spirate 2.4
    • Ver Perfil
    • Spirate 2.4 Muy Pronto!!!
    • Email
Re:Estilo de un cuadro de selección Usando Sólo CSS
« Respuesta #11 en: Marzo 21, 2012, 05:43:50 am »
me olvide el +1 XD es que comente a las apuradas haber si lo meto en mi web
Esto me gusto!!! +1
Gracias! a los dos, veo cuando posteo un diseño mas cool para el formulario de registro, lo veo muy seco, simple la que trae por default.

Saludos