jQuery Mobile botón color de fondo

aquí es mi código de un botón móvil jQueryjQuery Mobile botón color de fondo

<a href="#" data-role="button" style="color:green; background-color:red";> 
    Search 
</a>

quiero cambiar el color del botón del fondo, he tratado de estilo en línea, pero no su trabajo, sin embargo los cambios de color de texto normalmente.

gracias

Fuente

2012-03-17 h_a86

cualquier código de trabajo/ejemplo puede ayudar a identificar mejor el problema, de ser posible, ponga esto en jsfiddle – Jack

estilos móviles jQuery están aplicados utilizando temas. Cuando se agrega un enlace a un contenedor, se le asigna automáticamente una letra de muestra de tema que coincide con su barra padre o cuadro de contenido para integrar visualmente el botón en el contenedor principal, como un camaleón.

Por lo tanto, un botón colocado dentro de un contenedor de contenido con un tema de "a" (negro en el tema predeterminado) se asignará automáticamente al tema del botón "a" (carbón en el tema predeterminado).

Aquí puede ver los temas existentes. http://jquerymobile.com/demos/1.1.0-rc.1/docs/buttons/buttons-themes.html

Si desea crear su propio puede utilizar rodillo tema: http://jquerymobile.com/themeroller/

Fuente: http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/themes.html

Fuente

2012-03-17 08:44:12

jQuery Mobile inicializado widgets y añade estructura HTML cuando se hace un enlace en un botón. Puede utilizar esta estructura para apuntar a los widgets de botón y sus elementos descendientes de cambiar los estilos que queremos cambiar:

HTML -

<a class="my-btn" data-role="button" href="#"> 
    Search 
</a>

CSS -

.ui-page .ui-content .ui-btn.my-btn .ui-btn-inner { 
    color  : green; 
    background : red; 
}

Esto apunta a los .ui-btn-inner elemento que es un descendiente del elemento a.ui-btn (su enlace original, al que agregué la clase my-btn), que se encuentra en una pseudopágina de jQuery Mobile y establece que es background y el texto color.

Aquí es una demostración: http://jsfiddle.net/WZ9pf/

El color del texto estaba trabajando para que antes porque se heredado por los elementos descendientes, por lo que si se establece el texto color en el elemento body por ejemplo, todos los elementos recibirán ese texto color si no especificas otro más abajo en el árbol.

Así se puede ver lo que hace jQuery Mobile a un enlace que se excita en un botón, aquí es lo que el HTML anterior se convierte en:

<a href="#" data-role="button" class="my-btn ui-btn ui-btn-corner-all ui-shadow ui-btn-hover-c ui-btn-up-c" data-theme="c"> 
    <span class="ui-btn-inner ui-btn-corner-all"> 
     <span class="ui-btn-text"> 
      Search 
     </span> 
    </span> 
</a>

también, si desea crear gradientes fácilmente, aquí es una gran herramienta: http://www.colorzilla.com/gradient-editor/

aquí es una roja me sacó de los gradientes pre-hechos: http://jsfiddle.net/WZ9pf/1/

Fuente

2012-03-17 12:52:59 Jasper

simplemente usar "fondo" en lugar de "background-color:"

<a href="[url]" data-role="button" style="background: green; color: white;">Search</a>

Lo probó y funciona como un amuleto.

Fuente

2012-05-11 02:34:58 user1182155

gracias, eso es lo que estaba buscando, para una anulación simple en un solo botón. – carillonator

¿Alguna idea de por qué 'background funciona y' background-color' no? – showdev

Aquí hay un botón de muestra 'rojo'.

Sólo tiene que añadir los datos-theme = "f" a su etiqueta de botón y entonces esto podría ser un método recomendado en la que puede crear sus propios botones de temas, soporte de

.ui-btn-up-f, .ui-btn-hover-f, .ui-btn-down-f { 
    color: white; 
    font-weight: bold; 
    text-decoration: none; } 

.ui-btn-up-f { 
    border: 1px solid #711414; 
    background: #ab2525; 
    text-shadow: 0 -1px 1px #711414; 
    background-image: -moz-linear-gradient(top, #c44f4f, #ab2525); 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #c45e5e), color-stop(1, #9e3939)); 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#c44f4f', EndColorStr='#ab2525')"; } 

.ui-btn-hover-f { 
    border: 1px solid #6e0000; 
    background: #b54a4a; 
    text-shadow: 0 -1px 1px #690101; 
    background-image: -moz-linear-gradient(top, #d47272, #b54a4a); 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #d47272), color-stop(1, #b54a4a)); 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#d47272', EndColorStr='#b54a4a')"; } 

.ui-btn-down-f { 
    border: 1px solid #782323; 
    background: #c44f4f; 
    text-shadow: 0 -1px 1px #782323; 
    background-image: -moz-linear-gradient(top, #9e3939, #c44f4f); 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #9e3939), color-stop(1, #c44f4f)); 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#9e3939', EndColorStr='#c44f4f')"; }

referencia Código de https://gist.github.com/1057852

Fuente

2012-10-12 01:56:25 theunexpected1

Si el botón se define como:

<button type="button" id="yourbutton">Hello</button>

a continuación, el código para establecer el fondo es:

$('#yourbutton').parent().find('.ui-btn-inner').css("background-color",highcolor);

Fuente

2013-03-09 21:47:47 bart59

usted tiene que anular no sólo el color de fondo, pero el gradiente de imagen de fondo con el color que desea funciona perfecto para mí

.ui-btn { 
    background: #00BCD4; 
    background-image: -moz-linear-gradient(top, #00BCD4, #00BCD4); 
    background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #00BCD4), color-   stop(1, #00BCD4)); 
    color:#FFFFFF; 
    text-shadow:0px 0px 0px ; 
    font-size: 40px; 
    border: none;

}

Fuente

2014-12-21 10:58:43

<button class="my-btn">submit</button>

css

.my-btn { 
    background:#ea5514 !important; 
    color:#ffffff !important; 
}

Fuente

2015-07-27 06:00:24 Bone

jQuery Mobile botón color de fondo

Respuesta

Cuestiones relacionadas