¿Cambiar el tamaño del botón de la interfaz de usuario jQuery?

Question

He estado usando el botón jQuery UI en toda mi página, sin embargo, no he encontrado una forma de resolver lo que parece ser un problema simple. Quiero un poco de mis botones para ser más pequeño que el otro, esto debe ser tan simple como establecer el CSS del texto botón para algo así, font: .8em; Sin embargo jQuery UI toma su elemento DOM y lo envuelve:

<button class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all"> 
    <span class="ui-button-text">Button Label</span> 
</button> 

Así si tengo un <button class="small-button">Small button!</button>, jQuery colocará el texto en un espacio para niños. Cualquier tamaño de fuente dado a la clase small-button será ignorado.

Tiene que haber una forma de evitar esto sin hackear la forma en que jQuery hace sus botones. ¿Algunas ideas?

Answer 1

Si está diseñando ui-button-text directamente con font-size, puede anularla en un nivel superior aplicando! Important. Tales como:

.small-button { 
    font-size: .8em !important; 
} 

EDIT: tratar de establecer un estilo CSS directamente en .ui-button-text para heredar:

.ui-button-text { 
    font-size: inherit !important; 
} 

Esto también debería hacer el importante sobre la .small-button irrelevante!.

Answer 2

Esto ayudó a reducir la altura del botón para mí (Suavidad tema por defecto es la línea de altura de 1,4):

.ui-button .ui-button-text 
{ 
line-height: 1.0; 
} 

Answer 3

Se pueden crear diferentes botones de tamaño modificando el relleno del elemento span que está contenida dentro del marcado que jQuery genera, como sugiere Tim.

Este marcado/JavaScript ...

$(document).ready(function(){ 
    $("button").button(); 
}); 

<button id="some-id" class="some-class">Some Button</button> 

Los resultados de este marcado transformado ...

<button class="some-class ui-button ui-widget ui-state-default ui-corner-all 
      ui-button-text-only" id="some-id" role="button" aria-disabled="false"> 
<span class="ui-button-text">some button</span> 
</button> 

Qué más ciertamente incluye los id y class etiquetas que fueron suministrados originalmente. Puede modificar el tamaño de sus botones agregando más relleno al elemento span.ui-button-text.

como tal ..

button#some-id .ui-button-text { 
    /* padding values here to your liking */ 
} 

Answer 4

Sólo cambia el botón de tamaño de fuente;).

<asp:Button ID="btn2" runat="server" Text="Button" style="font-size:10px" /> 

Ahora añadir un script jQuery al botón

<script type="text/javascript" language="javascript"> 
     $(document).ready(function() { 
      $('input:submit, #btn2').button(); 
     }); 
    </script> 

buena suerte. ;)

Answer 5

He utilizado una combinación de dos sugerencias anteriores. Es bastante fácil ajustar la interfaz de usuario de la manera que me gusta.

Para añadir hoja de estilo de página:

.ui-button .ui-button-text 
{ 
    padding: 0px 11px 0px 21px !important; 
    font-size: .72em !important; 
} 

Answer 6

Esto es lo que utilizo en mis sitios web para configurar los tamaños de fuente para que mis tamaños de botón son los mismos que en el jQuery UI website.Esto funciona porque es exactamente como lo hace el jQuery UI website.

/* percentage to px scale (very simple) 
80% = 8px 
100% = 10px 
120% = 12px 
140% = 14px 
180% = 18px 
240% = 24px 
260% = 26px 
*/ 

body 
{ 
    font-family: Arial, Helvetica, sans-serif; 
    font-size:10px; 
} 

Al establecer las propiedades font-size así por el elemento del cuerpo, estableciendo el tamaño de fuente para todo lo demás se vuelve trivial como 100% = 10px.

Solo tenga cuidado con el efecto de cascada al usar porcentajes: el elemento 100% de un elemento secundario será igual al tamaño de fuente del elemento principal.

Answer 7

Mi solución tenía que trabajar a través de los nuevos elementos de menú, así

La primera para seleccionar los elementos que coinciden tanto para el menú y el botón

.menu>.ui-button-icon-only, 
.ui-button{ 
font-size:0.8em !important; 
} 

Y la segunda que el anterior para forzar inheiritance

.ui-button-text { 
font-size: inherit !important; 
} 

Answer 8

Use jQuery en tiempo de ejecución, sin modificar CSS. Esto te da mucha más flexibilidad.

$(function() { 
    $("input[type=button]").css("font-size", "0.8em"); 
}); 

Answer 9

Hice esto y funciona bien.

$("button").button("font-size", "0.8em"); 

Answer 10

<input type="submit" value="Mostrar imágenes">

y mi css:

input[type="submit"] { 
color: #000; 
border: 0 none; 
cursor: pointer; 
height: 30px; 
width: 150px; }