I hope and they are well, what happens is that I have a problem when making responsive the arrow of a "select" or "comboBox" element here is the css code where the image is loaded:
.selectArrow {
background: URL(../img/unfold-icon.png) no-repeat 416px 16px #f4f4f4 !important;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
padding-left: 24px;
box-shadow: none;
background-color: transparent;
background-image: none;
display: inline-block;
position: relative;
/* appearance: none;*/
}
And what throws me in the responsive view is this:
Lastly I would put my html:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1" />
<meta name="format-detection" content="telephone=no"/>
<!--<script src="../comun/js/jquery_v1.11.3.js"></script>-->
<!--<script type="text/javascript" src="../comun/js/iframeResizer.contentWindow.min.js"></script>-->
<!--<script type="text/javascript" src="../comun/js/EnmascaraV2-AEM.js"></script>-->
<link rel="stylesheet" href="css/style_MD_cta.css">
<script type="text/javascript" src="js/DataLayer/dataLayer.js"></script><!--listo-->
<script type="text/javascript" src="js/DataLayer/dataLayer_.js"></script><!--listo-->
<script type="text/javascript" src="js/DataLayer/funciones_dataLayer.js"></script><!--listo-->
<script src="//assets.adobedtm.com/95bb966a4c61b200a089c37679aaf96e22114787/satelliteLib-fbdb84ebd99368b1f7fb97b75596c095b9f7ee40-staging.js"></script>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> <!--listo-->
<script type="text/javascript" src="js/seleccion.js"></script><!--listo-->
<script src="//assets.adobedtm.com/95bb966a4c61b200a089c37679aaf96e22114787/mbox-contents-a552a4edacd46d5f42cf557b1157973f26c55845.js"></script>
<script>
$(document).ready(function () {
$('#seguro').val('');
$('#pension').val('');
});
</script>
</head>
<body>
<div class="container">
<h1>Simulador Pensión</h1>
<h2>Descubre a través de este simulador, cual podría ser un aproximado del monto de Pensión que
recibirás de acuerdo a los datos que nos proporciones.</h2>
<form name="index" method="post" action="views/paso-02.jsp">
<div class="botonera">
<div id="bt_div" class="derecha">
<div class="group">
<select name="seguro" class="selectArrow" class="Caja_txt_246" tabindex="9" id="seguro" onchange="Opciones()" >
<option value="" selected="">--Seleccione--</option>
<option value="1" id="TDSIV">Invalidez y Vida</option>
<option value="2" id="TDSRT">Riesgo de trabajo</option>
<option value="3" id="TDSRCV">Retiro y Cesantía</option>
</select>
<label class="combo">Tipo de Seguro</label>
</div>
<p class=" cond SP_alert"></p>
</div>
<div id="bt_div" class="izquierda">
<div class="group">
<div id="DivPension">
<select class="selectArrow" name="pension" class="Caja_txt_246" id="pension" tabindex="9">
<option value="" selected="">--Seleccione--</option>
</select>
</div>
<label class="combo">Tipo de Pensión</label>
</div>
</div>
</div>
<div class="botonera">
<div id="bt_div" class="izquierda">
<button type="submit" id="loginButton" onclick="validar(event);" >Siguiente</button>
</div>
</div>
</form>
</div>
<script language="JavaScript" type="text/javascript">
setVersionDL();
setPageInstanceID("des");
setPageIntent("informacion");
setPageSegment("personas");
setSysEnv("escritorio");
setChannel("online");
setLanguage("ES");
setGeoRegion("MX");
setLevel(1, "pensiones");
setLevel(2, "simulador pensiones");
setLevel(3, "1 seleccion tipo de seguro");
setArea("publica");
setPageName();
setServer();
setBussinessUnit("BBVA Bancomer");
setMobile();
setUserState("no logado");
setType("simulador");
setName("simulador pensiones");
setFulfillmentModel("online");
setStep("1 seleccion del tipo de seguro");
setState("inicio");
setPrimaryCategory("inversiones");
setProductName("");
setProductSubtype("planes de pensiones");
setUserAgent();
</script>
<script>
function validar(event) {
event.preventDefault();
//obteniendo el valor que se puso en el campo text del formulario
var miCombo = document.getElementById("seguro").value;
var miCombo2 = document.getElementById("pension").value;
//la condici�n
if (miCombo == "") {
// alert('*Seleccione una opcion en seguro. \n');
$(".SP_alert").text("*Seleccione una opcion en seguro. \n");
$("#SP").css("border-bottom", "solid 1px #D44B50");
$(".SP_alert").show();
$( ".selectArrow" ).removeClass();
$("select").css("background-color", "#FCDFDF");
} else if (miCombo2 == "") {
// alert('*Seleccione una opcion en pension. \n');
$(".SP_alert").text("*Seleccione una opcion en pension. \n");
$( ".selectArrow" ).removeClass();
$("select").css("background-color", "#FCDFDF");
$(".SP_alert").show();
$("#SP").css("border-bottom", "solid 1px #D44B50");
} else
document.index.submit(event);
}
</script>
<script type="text/javascript">_satellite.pageBottom();</script>
</body>
</html>
What I want is to move when the responsive is done, I hope and you can help me with this problem that prevents me from moving forward, in advance I send you a cordial.
