CSS compatible in all browsers?

1

Good morning,

I have the following style in css for a button and for a combobox, when viewing them in mozilla 57.0.2 the blank button and the combobox with blank options appear. What should I add or change to be compatible in this browser?

#Estilo_botón

.buttonBlue:hover{
	color: #FFFFFF;
	border-color: #003C6F;
	background: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #004b8c),
		color-stop(100%, #0069b1) );
	background: -webkit-linear-gradient(bottom, #004b8c 0%, #0069b1 100%);
	background: -moz-linear-gradient(bottom, #004b8c 0%, #0069b1 100%);
	background: -o-linear-gradient(bottom, #004b8c 0%, #0069b1 100%);
	background: linear-gradient(bottom, #004b8c 0%, #0069b1 100%);
	background: -ms-linear-gradient(bottom, #004b8c 0%, #0069b1 100%);
	filter: progid : DXImageTransform.Microsoft.gradient ( GradientType = 0,
		startColorstr = #0069b1, endColorstr = #004b8c );
	-webkit-box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.2);
	box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.2);
}


	/*ESTILOS DE COMBOS*/
	.selectorCombo {
		vertical-align: middle;
		margin-top: 4px !important;
		color: #2b70b5;
		border: 1px solid #D5E2EE !important;
		width: 100%;
		padding: 4.6px;
		border-radius: 5px;
		pointer-events: stroke;
		cursor: pointer;
		background: transparent
			linear-gradient(to bottom, #FFF 40%, #E1E1E1 200%) repeat scroll 0%
			0%;
		font-family: "Georgia";
	}

	.selectorCombo .ui-selectonemenu {
		border: 1px solid #D5E2EE !important;
		background: transparent
			linear-gradient(to bottom, #FFF 40%, #E1E1E1 200%) repeat scroll 0%
			0%;
		width: 100% !important;
	}

	.selectorCombo .ui-selectonemenu-label {
		box-shadow: none !important;
		color: #0078D2 !important;
		font: 12px Helvetica, sans-serif !important;
		font-weight: bold !important;
		background: transparent none repeat scroll 0% 0% !important;
		padding: 6.6px;
		width: 100% !important;
	}

	.selectorCombo .ui-selectonemenu.open .ui-selectonemenu-trigger .ui-icon
		{
		background-image: url("../img/icons/arrows/arrow-up-small.png")
			!important;
		background-position: 2px 6px;
	}
	.selectorCombo .select-picker-error .ui-selectonemenu-label {
		color: #C6056C !important;
		padding: 8px;
	}
    
asked by Paula Marín 05.01.2018 в 23:57
source

1 answer

2

CSS PREFIX OF BROWSERS

They are called navigational prefixes or prefixes (vendor prefixes) to a prefix that is prefixed to a CSS rule intended for that rule to be read and applied exclusively by a specific browser (for example Chrome) but not by the rest of browsers The use of prefixes is usually applied to properties that are in experimental phase or that have not yet become a standard.

  • -webkit- (Google Chrome and Safari)
  • -moz- (Firefox)
  • -o- (Opera)
  • -ms- (Internet explorer)

With the scripts.

Example;

.elemento{
  -moz-transition:all 0.5s ease;
  -webkit-transition:all 0.5s ease;
  -o-transition:all 0.5s ease;
  -ms-transition:all 0.5s ease;
}

Greetings.

    
answered by 06.01.2018 / 00:16
source