para - input type button css

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 UI 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 en función del 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 de manera predeterminada .

Una solución es establecer el estilo de CSS para el botón de envío dentro de mi script para que se muestre de manera 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 configuro el estilo CSS para el botón de envío para que se muestre de una "manera predeterminada" 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 hacer que los botones de envío dentro de la interfaz de usuario de mi bookmarklet se muestren de la "manera predeterminada", independientemente de si la página web subyacente eligió o no el estilo?

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

Answer 1

Tomado del Centro de desarrolladores de Mozilla

Restauración del valor de propiedad predeterminado Dado que CSS no proporciona una palabra clave "predeterminada", la única forma de restablecer el valor predeterminado de una propiedad es volver a declarar explícitamente 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 valor predeterminado original el valor no se puede restaurar automáticamente. Debido a la naturaleza en cascada de CSS, es una buena práctica definir las reglas de estilo lo más específicamente 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: es decir,

background-color:grey !important;

en lugar de

background:grey;

Answer 2

Para Firefox puede encontrar los estilos de formulario predeterminados escribiendo resource: //gre/res/forms.css en la barra de direcciones, que al menos le proporciona los detalles del estilo predeterminado para un botón de entrada para que pueda copiarlos y anular el uso de una regla importante.

Sin embargo, 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 INPUT (el botón Enviar es un tipo de entrada) para que no afecte los botones Enviar

Entonces, en lugar de solo poner:

input{
blah; blah; blah;
}

Puedes crear un estilo:

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

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

La referencia de JWW a resource: //gre/res/forms.css es helpul. Si observa eso, verá cómo establecer un estilo que afecte a varios tipos diferentes de entrada.

Answer 4

Se me ocurrió 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 pueda ayudar a alguien. Gracias.

Answer 5

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 tus 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 6

Gracias, usado 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 7

La URL anterior a los estilos predeterminados en Firefox ya no funciona en al menos ff14, la nueva ubicación es:

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

Answer 8

Lo que hice y parece funcionar 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

Esto parece funcionar maravillosamente (confía en mí, pruébalo):

/* 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 usar el estilo de abajo para restablecer el estilo del botón al estilo predeterminado

.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;
}

Enlace de referencia - GitHub

Arriba está la solución a su problema, pero no creo que el restablecimiento de CSS sea factible a menos que terminemos en esa situación, así que trate de evitar este tipo de situaciones.

Espero que esto ayude.

Gracias