Como hacer lo siguiente con css ?

[RyanTylor]

Saludos gente,

quiero hacer lo siguiente con css:



La (x) es un boton en mi caso le cambiaria el icono a ese boton, solo quiero saber como hacer eso, pero no se nada sobre estilos, alguien que me ayude con esto. gracias !

[hackjose]

Para el numero debes usar

Código HTML:

<input type="number" min="1" max="5" />
 

Para la X debes usar

Código HTML:

<input type="button" value="X">
 

Si quieres alguna interaccion entre el boton y "el cambiador de numero" debes usar javascript

[RyanTylor]

Amigo gracias,

pero hablando meramente de los estilos css como hago via css para que me queden tal como en la imagen se ve ?

[AngelKrak]

si no sabes CSS, te recomiendo que uses Bootstrap ;)
http://getbootstrap.com/css/#buttons

[ariki]

ese te sirve si haces dos input del boton y del number

Código HTML:

#number{
    padding: 5px;   
    border: 1px solid #DDDDDD;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
	border-bottom-right-radius: 0px;
	border-top-right-radius: 0px;
	background-color:#FFF; 
}
#number:hover
{
    border:1px solid #dedede;
}
#number:focus
{
    box-shadow:0 0 2px #FFFE00;
}
#botonx{
    
    padding: 5px;
	background-color:#FFF;    
	border: 1px solid #DDDDDD;
	text-align:center; 
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
	border-bottom-left-radius: 0px;
	border-top-left-radius: 0px;
}
#botonx:active{
	background-color: #666666;
}

[fede5426]

Código CSS:

.number{
  width:30px;
  padding:.3em .5em;
  border:2px solid #dedede;
  border-top-left-radius:.3em;
  border-bottom-left-radius:.3em;
}
 
.boton{
  margin:-5px;
  padding:.3em .7em;
  background:#fff;
  border:2px solid #dedede;
  border-top-right-radius:.3em;
  border-bottom-right-radius:.3em;
  border-left:0;
  font-weight:bold;
}
 

http://codepen.io/anon/pen/pJodzb

La "X" del boton seguramente es una imagen colocada con "background-image", no una fuente.. algo como esto:



Saludos