Foro sobre hojas de estilo CSS

Formato de los Button

Volver al foro | Responder | Añadir nuevo tema

---

De: Carla
Fecha: 27/04/2005
Mensaje:

�C�mo se hace para dar formato a un bot�n bien de tipo button o sumbit o reset, en una p�gina JSP con la CSS aparte?

Yo pruebo a poner en la CSS button{...formato...} pero no var�a nada. �Debo poner alguna modificaci�n en el c�digo de los botones?

Gracias.

---

De: Rodri
Fecha: 27/04/2005
Mensaje:

yo lo que ago es esto poner una bonita imagen

<input type="image" src="foto.gif"  class="formulario" value="buscar" /

---

De: Carla
Fecha: 28/04/2005
Mensaje:

Me refiero a que el bot�n tenga un fondo de color diferente, letra, distinto formato, �que debo hacer si mi bot�n es como el que sigue, por ejemplo?

<INPUT TYPE="button" VALUE="Comprobar datos" onClick="newPage('Comprueba.jsp')">

 

---

De: Zero-Killed
Fecha: 01/05/2005
Mensaje:

Estabas casi ahi para obtenerlo (a Carla)...
Segun lo que mencionastes: "Yo pruebo a poner en la CSS button{...formato...} " De por si, esa es la sintaxis, pero "button" no es una etiqueta HTML. button es una definicion que se asigna al tipo de un input. O sea:

<input type="button" .... >

El unico cambio que tienes que hacer es el siguiente (basandonos en tu ejemplo):

<INPUT TYPE="button" VALUE="Comprobar datos" onClick="newPage('Comprueba.jsp')" class="un_nombre">

Fijese en el codigo de color rojo. Tienes que a�adirle ese atributo y asignarle un nombre que te guste o que te sea facil reconocer a que elemento le estas aplicando tal estilo. Luego, en el lugar donde estes definiendo el estilo CSS; en lugar de escribirlo de esta manera: button{...formato...} Solo cambias el nombre button y escribes el mismo nombre que le aplicaste al atributo class en el input anterior. Un ejemplo:

- En HTML definimos el input de tipo boton:

<input type="button" class="myButton">

- En el lugar donde estes definiendo el CSS:

.myButton{border-width:1px;
border-color:#FF00F0;
border-style:solid;
text-align:center;
font-weight:bold;
font-size:12pt;
font-family:arial;
background-color:#ABCDEF;
color:#123456;
}

Fijese que cuando se define el estilo, antes del nombre ubique un punto decimal (.) . Ese punto es importante ya que se esta definiendo una clase (class) que luego se le atribuye a un elemento HTML, en este caso al input. Pero, ese punto no debe de ubicarse cuando se le asigna la clase al elemento HTML; mirad bien el ejemplo cuando se definio el input en la parte HTML. La ventaja de usar clases es que no solo se lo puedes aplicar a un elemento HTML, sino a varios aplicandole el mismo estilo. Solo tienes que a�adirle el atributo class a la etiqueta y el nombre correspondiente.

Esto no necesariamente debe de aplicarse a un documento HTML, sino tambien puede usarse con algun documento que genere el JSP.

---

---

De: Carla
Fecha: 01/05/2005
Mensaje:

Muchas gracias.

---

De: marco
Fecha: 09/11/2006
Mensaje:

Hay alguna forma para hacer un estilo que afecte a todos los input tipo button??

algo asi como para los input:

.input{styles}

existe algo como esto:

.input button{styles}

por favor es urgente.

gracias de antemano.

---

De: ZeroKilled
Fecha: 10/11/2006
Mensaje:

eventualmente existe una forma, pero desgraciadamente uno de los navegadores populares no lo admite, el famoso y asqueroso MSIE. de todos modos, la solucion es/era la siguiente:

input[type='button']{
...
}

lo anterior es un selector por atributo y valor. fijate que va encuadrado en los signos [] y dentro de este escribe el nombre del atributo y si valor. hasta donde la conciencia me alcanza, no creo que sea posible identificar dos atributos al mismo tiempo. la otra solucion es simplemente utilizando el selector por clase y luego se lo a�ades a los input que tu deseas.

---

De: pepex
Fecha: 22/01/2007
Mensaje:

mmm..ya pero le puede asignar atributos hover, visited, active a ese boton? lo he intentado a traves de Css pero parace ignorarlo.

---

De: Novatos de css
Fecha: 08/08/2007
Mensaje:

Tengo lo siguiente en mi hoja de estilo: #boton input { height: 15px; width: 50px; font-family: Arial, Helvetica, sans-serif; font-size: 9px; font-weight: bolder; text-align: center; text-decoration: none; padding: 35px 0 0 0px; border-style: solid solid none solid; border-size: 0px; border-width: 0px; voice-family: inherit; color:#808080; } #boton input:hover { color: #C24733; background-position: 0px -50px; padding: 35px 0 0 0px; } #boton input.ingreso { background: url(../../images/nuevoA.gif) no-repeat;} Y resulta que cuando lo asigno al control web no funciona el hover... Lo he probado en IE y Opera y el resultado es el mismo... no se q est� mal.

---

De: ada
Fecha: 13/09/2007
Mensaje:

hay un foro de foros? quiero hacer uno sencillo en mi pagina

---

De: Johnf666
Fecha: 05/12/2016
Mensaje:

Thank you for every other informative blog. The place else may just I get that type of info written in such a perfect means? I've a project that I'm just now working on, and I have been at the glance out for such information. bceacfkgdbdf

---

Volver al foro | Responder | Añadir nuevo tema


WebEstilo.com no se hace responsable de las opiniones que los usuarios puedan verter en cualquiera de los foros existentes.

Comparte