Revertir el estilo CSS de <input type = submit button a su estilo predeterminado

Question

Estoy usando un bookmarklet que inserta una etiqueta de script en la página web actual.

Este script tiene alguna IU y una etiqueta "input type=submit...." en él.

La página web A ha elegido no etiquetar las etiquetas "input type=submit.." mientras que la página web B las ha diseñado.

Esto hace que el bookmarklet muestre botones de envío de estilo diferente según el estilo de la página subyacente.

Quiero que los botones de envío se diseñen de forma idéntica en todas las páginas web en de manera predeterminada.

Una solución es establecer el estilo CSS para el botón Enviar dentro de mi secuencia de comandos , por lo que se muestra de forma idéntica en todas las páginas. (Esto es lo que he hecho para todas las demás etiquetas ).

Mi pregunta es:

1. ¿Cómo se configura el estilo CSS para el botón de enviar para que muestre en un 'modo por defecto' o ?
2. ¿Se puede eliminar el estilo existente y, de ser así, cómo se muestra el botón para que se muestre de la 'manera predeterminada'?

En otras palabras, ¿cómo puedo tener los botones presentar, dentro de la interfaz de usuario de mi bookmarklet se mostrará en la 'forma predeterminada', independientemente de si la página web subyacente ha elegido el estilo o no?

Nota: Por 'manera predeterminada' me refiero a la forma en que se muestra el botón Enviar cuando no se agrega ningún estilo. Por ejemplo, los botones "Buscar en Google" o "Tengo suerte" en http://www.google.com.

Answer 1

Tomado de Mozilla Developer Center

Restaurar el valor predeterminado de la propiedad Debido CSS no proporciona una palabra clave "default", la única manera de restaurar el valor predeterminado de una propiedad es regenerar de forma explícita declara esa propiedad. Por lo tanto, se debe tener especial cuidado al escribir reglas de estilo usando selectores (por ejemplo, selectores por nombre de etiqueta, como p) que puede anular con reglas más específicas (como las que usan id o selectores de clase), porque el original el valor predeterminado no se puede restaurar automáticamente. Debido a la naturaleza en cascada de CSS, es una buena práctica definir las reglas de estilo de la manera más específica posible para evitar elementos de estilo que no se diseñaron.

La única manera que tiene es establecer su propia clase en el botón que es muy explícita en sus reglas css: i.e

background-color:grey !important; 

en lugar de

background:grey; 

Answer 2

Para Firefox se pueden encontrar los estilos de forma predeterminada por recurso escribiendo: //gre/res/forms.css en la barra de direcciones, lo que al menos le dan los detalles del estilo predeterminado para un botón de entrada para que luego pueda copiarlos y anularlos usando una regla importante.

No es del todo satisfactorio, ya que el estilo predeterminado podría cambiar con una versión futura del navegador y el estilo predeterminado para diferentes navegadores podría ser diferente.

Answer 3

Puede restringir el estilo CSS de la entrada (botón de envío es un tipo de entrada) por lo que no afecta botones Enviar

Así que en lugar de limitarse a poner:

input{ 
blah; blah; blah; 
} 

Se puede crear un estilo:

input[type="text"] { 
blah blah blah 
} 

Y eso solo afectará a la entrada de texto, dejando todo lo demás, incluidos los botones de envío como predeterminado.

La referencia de JWW al recurso: //gre/res/forms.css es helpul. Si lo ves, verás cómo configurar un estilo para que afecte a varios tipos diferentes de entrada.

Answer 4

Gracias, que se utiliza con buenos resultados

INPUT, SELECT 
{ 
    color: #003333; 
    font-size: 90%; 
    border-bottom: #d3d3d3 1px solid; 
    border-left: #d3d3d3 1px solid; 
    border-top: #d3d3d3 1px solid; 
    border-right: #d3d3d3 1px solid; 
} 

INPUT[type="submit"] 
{ 
    background-color: #336699; 
    color: #f0e68c; 
} 

Answer 5

que surgieron con el mismo problema. Esta publicación me ayudó mucho. Tuve que asignar esa regla CSS a las entradas de texto en una tabla especial, pero no a todas las entradas de texto en la página. Así que tuve que usar la regla de CSS con el ID de la tabla. Esto debería funcionar bien con id de formulario.

'#addForum note' es la identificación de la tabla especial formateada.

 

#addForumNote input[type="text"], label, textarea{ 
    width: 425px; 
    background-color: #ccc; 
    border-style: solid; 
    border: 1px; 
    border-color: #7a7b7a; 
} 
 

Espero que esto ayude a alguien. Gracias.

Answer 6

No creo que haya ninguna forma de acceder al estilo calculado. Javascript (hasta donde yo sé) solo puede establecer estilos en línea y asignar clases. Me gustaría que el objeto de estilo DOM tuviera acceso a los estilos calculados, pero lamentablemente no es así.

Lo mejor que se me ocurre en este momento es simplemente declarar sus propias reglas CSS para anular el uso del sitio host. Mientras su regla css sea más específica, al final ganará. Esto le dará a su bookmarklet una apariencia coherente en todos los navegadores, lo que podría no ser tan malo al final.

Answer 7

la URL anterior a los estilos por defecto en Firefox ya no funciona en al menos FF14, la nueva ubicación es:

resource:///chrome/toolkit/res/forms.css 

Answer 8

lo que he hecho y parece que funciona en todos los navegadores es ...

$(buttonID).css({ 
'background-color':'' 
}); 

simplemente dejando el color de fondo vacío, parece volver el botón a su estado predeterminado.

Answer 9

This parece funcionar muy bien (confía en mí, probarlo):

/* Restore Browser's Default Submit Button Style */ 
input[type=submit] { 
    background:ButtonFace; 
    color:ButtonText; 
    border:2px outset ButtonFace; 
} 
input[type=submit]:active { 
    border-style:inset; 
    -webkit-appearance:push-button; 
} 

Answer 10

Puede utilizar a continuación el estilo para restablecer estilo del botón de estilo por defecto

.reset-this { 
 
    animation : none; 
 
    animation-delay : 0; 
 
    animation-direction : normal; 
 
    animation-duration : 0; 
 
    animation-fill-mode : none; 
 
    animation-iteration-count : 1; 
 
    animation-name : none; 
 
    animation-play-state : running; 
 
    animation-timing-function : ease; 
 
    backface-visibility : visible; 
 
    background : 0; 
 
    background-attachment : scroll; 
 
    background-clip : border-box; 
 
    background-color : transparent; 
 
    background-image : none; 
 
    background-origin : padding-box; 
 
    background-position : 0 0; 
 
    background-position-x : 0; 
 
    background-position-y : 0; 
 
    background-repeat : repeat; 
 
    background-size : auto auto; 
 
    border : 0; 
 
    border-style : none; 
 
    border-width : medium; 
 
    border-color : inherit; 
 
    border-bottom : 0; 
 
    border-bottom-color : inherit; 
 
    border-bottom-left-radius : 0; 
 
    border-bottom-right-radius : 0; 
 
    border-bottom-style : none; 
 
    border-bottom-width : medium; 
 
    border-collapse : separate; 
 
    border-image : none; 
 
    border-left : 0; 
 
    border-left-color : inherit; 
 
    border-left-style : none; 
 
    border-left-width : medium; 
 
    border-radius : 0; 
 
    border-right : 0; 
 
    border-right-color : inherit; 
 
    border-right-style : none; 
 
    border-right-width : medium; 
 
    border-spacing : 0; 
 
    border-top : 0; 
 
    border-top-color : inherit; 
 
    border-top-left-radius : 0; 
 
    border-top-right-radius : 0; 
 
    border-top-style : none; 
 
    border-top-width : medium; 
 
    bottom : auto; 
 
    box-shadow : none; 
 
    box-sizing : content-box; 
 
    caption-side : top; 
 
    clear : none; 
 
    clip : auto; 
 
    color : inherit; 
 
    columns : auto; 
 
    column-count : auto; 
 
    column-fill : balance; 
 
    column-gap : normal; 
 
    column-rule : medium none currentColor; 
 
    column-rule-color : currentColor; 
 
    column-rule-style : none; 
 
    column-rule-width : none; 
 
    column-span : 1; 
 
    column-width : auto; 
 
    content : normal; 
 
    counter-increment : none; 
 
    counter-reset : none; 
 
    cursor : auto; 
 
    direction : ltr; 
 
    display : inline; 
 
    empty-cells : show; 
 
    float : none; 
 
    font : normal; 
 
    font-family : inherit; 
 
    font-size : medium; 
 
    font-style : normal; 
 
    font-variant : normal; 
 
    font-weight : normal; 
 
    height : auto; 
 
    hyphens : none; 
 
    left : auto; 
 
    letter-spacing : normal; 
 
    line-height : normal; 
 
    list-style : none; 
 
    list-style-image : none; 
 
    list-style-position : outside; 
 
    list-style-type : disc; 
 
    margin : 0; 
 
    margin-bottom : 0; 
 
    margin-left : 0; 
 
    margin-right : 0; 
 
    margin-top : 0; 
 
    max-height : none; 
 
    max-width : none; 
 
    min-height : 0; 
 
    min-width : 0; 
 
    opacity : 1; 
 
    orphans : 0; 
 
    outline : 0; 
 
    outline-color : invert; 
 
    outline-style : none; 
 
    outline-width : medium; 
 
    overflow : visible; 
 
    overflow-x : visible; 
 
    overflow-y : visible; 
 
    padding : 0; 
 
    padding-bottom : 0; 
 
    padding-left : 0; 
 
    padding-right : 0; 
 
    padding-top : 0; 
 
    page-break-after : auto; 
 
    page-break-before : auto; 
 
    page-break-inside : auto; 
 
    perspective : none; 
 
    perspective-origin : 50% 50%; 
 
    position : static; 
 
    /* May need to alter quotes for different locales (e.g fr) */ 
 
    quotes : '\201C' '\201D' '\2018' '\2019'; 
 
    right : auto; 
 
    tab-size : 8; 
 
    table-layout : auto; 
 
    text-align : inherit; 
 
    text-align-last : auto; 
 
    text-decoration : none; 
 
    text-decoration-color : inherit; 
 
    text-decoration-line : none; 
 
    text-decoration-style : solid; 
 
    text-indent : 0; 
 
    text-shadow : none; 
 
    text-transform : none; 
 
    top : auto; 
 
    transform : none; 
 
    transform-style : flat; 
 
    transition : none; 
 
    transition-delay : 0s; 
 
    transition-duration : 0s; 
 
    transition-property : none; 
 
    transition-timing-function : ease; 
 
    unicode-bidi : normal; 
 
    vertical-align : baseline; 
 
    visibility : visible; 
 
    white-space : normal; 
 
    widows : 0; 
 
    width : auto; 
 
    word-spacing : normal; 
 
    z-index : auto; 
 
}

Referencia enlace - GitHub

Más arriba es la solución a su problema, pero no creo que el restablecimiento de CSS sea factible a menos que terminemos en tal situación, así que trate de evitar este tipo de situaciones.

Espero que esto te ayude.

Gracias