I am having trouble with a JavaScript function for sending data to my Firebase Database. I have got it working where if I do it outside a function, it will work fine, but when it's called from on click, it will alert to me the values okay, but it won't go up to the database.
I spent 6 hours on this one page and it still won't work. I have a form you fill out first, I can use prompt boxes to use it, but I don't want to use the boxes when I have a form, here is my code. Can anyone see anything wrong with this?
// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkID=397704
// To debug code on page load in Ripple or on Android devices/emulators: launch your app, set breakpoints,
// and then run "window.location.reload()" in the JavaScript Console.
var email1;
var username1;
var password1;
var cpassword1;
var balance1;
(function () {
"use strict";
document.addEventListener('deviceready', onDeviceReady.bind(this), false);
function onDeviceReady() {
// Handle the Cordova pause and resume events
document.addEventListener('pause', onPause.bind(this), false);
document.addEventListener('resume', onResume.bind(this), false);
// TODO: Cordova has been loaded. Perform any initialization that requires Cordova here.
};
function onPause() {
// TODO: This application has been suspended. Save application state here.
};
function onResume() {
// TODO: This application has been reactivated. Restore application state here.
};
})();
function insertUser() {
email1 = document.getElementsByName("email")[0].value.trim();
username1 = document.getElementsByName("username")[0].value.trim();
password1 = document.getElementsByName("password")[0].value.trim();
cpassword1 = document.getElementsByName("cpassword")[0].value.trim();
balance1 = 20; // welcome new user with 20 euro complimentary credit!
var Users = new Firebase("https://seqr-payments.firebaseio.com/users");
alert(email1);
alert(username1);
alert(password1);
alert(balance1);
Users.push({
email: email1,
username: username1,
password: password1,
balance: balance1
});
}
// Validation code from:
// http://codepen.io/diegoleme/pen/surIK
function validatePassword() {
var password = document.getElementsByName("password")[0];
var cpassword = document.getElementsByName("cpassword")[0];
if (password.value != cpassword.value) {
cpassword.setCustomValidity("Passwords Don't Match");
document.getElementsByName("password")[0].style.boxShadow = "0 0 35px #FF0000";
document.getElementsByName("cpassword")[0].style.boxShadow = "0 0 35px #FF0000";
document.getElementsByName("password")[0].style.border = "3px solid #FF0000";
document.getElementsByName("cpassword")[0].style.border = "3px solid #FF0000";
} else {
cpassword.setCustomValidity('');
document.getElementsByName("password")[0].style.boxShadow = "0 0 35px #74ebe6";
document.getElementsByName("cpassword")[0].style.boxShadow = "0 0 35px #74ebe6";
document.getElementsByName("password")[0].style.border = "3px solid #74ebe6";
document.getElementsByName("cpassword")[0].style.border = "3px solid #74ebe6";
}
};
* {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
#signin {
-webkit-touch-callout: none;
-webkit-text-size-adjust: none;
-webkit-user-select: none;
background-color:#E4E4E4;
background-image:linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
background-image:-webkit-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
background-image:-ms-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
background-image:-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, #A7A7A7),
color-stop(0.51, #E4E4E4)
);
background-attachment:fixed;
font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
font-size:12px;
height:100%;
margin:0px;
padding:0px;
text-transform:uppercase;
width:100%;
background-color:#32383d;
font-family: 'RobotoRegular', 'Droid Sans', 'Segoe UI', Segoe, 'San Francisco', 'Helvetica Neue', Helvetica, Arial, Geneva, sans-serif;
font-size:12px;
}
/*start of login*/
.app {
background: url(../images/Logo.jpg) no-repeat center top;
position: absolute;
left: 50%;
top: 30%;
height: 50px;
width: 225px;
text-align: center;
padding: 180px 0px 0px 0px;
margin: -115px 0px 0px -112px;
/*
width: 100%;
padding: 12px 0px ;
margin: 8px 0;
box-sizing: border-box;
background-color: #f0f5f5;
box-shadow: 0 0 35px #74ebe6;
border: 3px solid #74ebe6;
-webkit-transition: 0.5s;
transition: 0.5s;
outline: none;
*/
}
#Error {
position:relative;
top:-100%;
}
#login_form1 {
width: 150%;
padding: 12px 20px ;
margin: 8px 0;
box-sizing: border-box;
background-color: white;
box-shadow: 0 0 35px #74ebe6;
border: 3px solid #74ebe6;
-webkit-transition: 0.5s;
transition: 0.5s;
outline: none;
position:absolute;
top:100%;
left:-25%;
}
#login_form1:focus{
border: 3px solid #66ff33;
}
#login_form2:focus{
border: 3px solid #66ff33;
}
#login_form2 {
width: 150%;
padding: 12px 20px ;
margin: 8px 0;
box-sizing: border-box;
background-color: white;
border: 3px solid #74ebe6;
-webkit-transition: 0.5s;
box-shadow: 0 0 35px #74ebe6;
transition: 0.5s;
outline: none;
position:absolute;
top:130%;
left:-25%;
}
#login_text1 {
position:absolute;
top:95%;
left:40%;
font-weight:200;
font-size:15px;
font-weight: bold;
}
#login_text2 {
position:absolute;
top:125%;
left:33%;
font-weight:200;
font-size:15px;
font-weight: bold;
}
#login_part1 {
}
#login_part2 {
position:absolute;
left:10%;
top:150%;
}
#login_login {
background-color: #74ebe6;
position: absolute;
border: none;
color: black;
text-decoration: none;
margin-left: 30%;
cursor: pointer;
box-shadow: 0 0 35px #74ebe6;
border: 3px solid #74ebe6;
padding:5px;
margin-top: 0.10cm;
width: 150%;
font-weight:bold;
top:80%;
left:-55%;
}
#login_register {
background-color: #74ebe6;
position: absolute;
border: none;
color: black;
text-decoration: none;
margin-left: 30%;
cursor: pointer;
box-shadow: 0 0 35px #74ebe6;
border: 3px solid #74ebe6;
padding:5px;
margin-top: 0.10cm;
width: 150%;
font-weight:bold;
top:150%;
left:-55%;
}
/* End of Login Page*/
#media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
.app {
background-position:left center;
padding:75px 0px 75px 170px;
margin:-90px 0px 0px -198px;
}
}
h1 {
font-size:24px;
font-weight:normal;
margin:0px;
overflow:visible;
padding:0px;
text-align:center;
}
.event {
border-radius:4px;
-webkit-border-radius:4px;
color:#FFFFFF;
font-size:12px;
margin:0px 30px;
padding:2px 0px;
}
.event.listening {
background-color:#333333;
display:block;
}
.event.received {
background-color:#4B946A;
display:none;
}
#keyframes fade {
from { opacity: 1.0; }
50% { opacity: 0.4; }
to { opacity: 1.0; }
}
#-webkit-keyframes fade {
from { opacity: 1.0; }
50% { opacity: 0.4; }
to { opacity: 1.0; }
}
.blink {
animation:fade 3000ms infinite;
-webkit-animation:fade 3000ms infinite;
}
/*
For menu across the whole site for uniform looking buttons
*/
.menu {
position:fixed;
bottom:0px;
left:0px;
width:100%;
height:auto;
background-color:lightblue;
}
.menuImage {
width:15%;
margin-left:4.5%;
margin-right:4.5%;
height:50px;
}
/* card payment form text box holders*/
#cvc {
width:50px;
}
#month, #year
{
width:50px;
}
#Error
{
color:red;
}
.menuIcon
{
width:45%;
height:45%;
padding:1%;
}
.background
{
background-color:aqua;
height:100%;
}
#register {
-webkit-touch-callout: none;
-webkit-text-size-adjust: none;
-webkit-user-select: none;
background-color:#E4E4E4;
background-image:linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
background-image:-webkit-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
background-image:-ms-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
background-image:-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, white),
color-stop(0.51, white)
);
background-attachment:fixed;
font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
font-size:12px;
height:100%;
margin:0px;
padding:0px;
text-transform:uppercase;
width:100%;
background-color:#32383d;
font-family: 'RobotoRegular', 'Droid Sans', 'Segoe UI', Segoe, 'San Francisco', 'Helvetica Neue', Helvetica, Arial, Geneva, sans-serif;
font-size:12px;
}
/* Profile Page */
#profile_heading {
font-weight:900;
font-size:30px;
}
.profile {
width: 100%;
padding: 12px 20px ;
margin: 8px 0;
box-sizing: border-box;
background-color: #f0f5f5;
box-shadow: 0 0 35px #74ebe6;
border: 3px solid #74ebe6;
-webkit-transition: 0.5s;
transition: 0.5s;
outline: none;
}
.profile_2 {
width: 100%;
padding: 12px 20px ;
margin: 8px 0;
box-sizing: border-box;
background-color: lightgray;
box-shadow: 0 0 35px #74ebe6;
border: 3px solid #74ebe6;
-webkit-transition: 0.5s;
transition: 0.5s;
outline: none;
}
.profile:focus{
border: 3px solid #66ff33;
}
.profile_background {
background-color:white;
}
#profile_botton {
background-color: #74ebe6;
position: relative;
border: none;
color: black;
text-decoration: none;
margin-left: 30%;
cursor: pointer;
box-shadow: 0 0 35px #74ebe6;
border: 3px solid #74ebe6;
height:25px;
padding:5px;
margin-top: 0.10cm;
width:40%;
}
.profile_font {
font-weight:200;
font-size:15px;
font-weight: bold;
}
/*end of profile page*/
/* card */
.card {
width: 100%;
padding: 12px 0px ;
margin: 8px 0;
box-sizing: border-box;
background-color: #f0f5f5;
box-shadow: 0 0 35px #74ebe6;
border: 3px solid #74ebe6;
-webkit-transition: 0.5s;
transition: 0.5s;
outline: none;
}
.card:focus{
border: 3px solid #66ff33;
}
.card_background {
background-color:white;
}
#card_botton {
background-color: #74ebe6;
position: relative;
border: none;
color: black;
text-decoration: none;
margin-left: 30%;
cursor: pointer;
box-shadow: 0 0 35px #74ebe6;
border: 3px solid #74ebe6;
padding:5px;
margin-top: 0.10cm;
width:40%;
}
.card_font {
font-weight:200;
font-size:15px;
font-weight: bold;
}
/*The end of Card page*/
/*Pay1*/
#amount {
width: 90%;
padding: 12px 20px ;
margin: 8px 0;
box-sizing: border-box;
background-color: white;
box-shadow: 0 0 35px #74ebe6;
border: 3px solid #74ebe6;
-webkit-transition: 0.5s;
transition: 0.5s;
outline: none;
position:absolute;
top:40%;
}
#amount:focus {
border: 3px solid #5BF68A;
}
#top_text {
color: black;
font-weight: bold;
display: block;
width: 90%;
position: absolute;
font-weight:200;
font-size:40px;
top:20%;
}
#pay1_button {
background-color: #66ff33;
position: absolute;
border: none;
color: black;
text-decoration: none;
margin-left: 30%;
cursor: pointer;
box-shadow: 0 0 35px #66ff33;
border: 3px solid #66ff33;
padding:5px;
margin-top: 0.10cm;
width:40%;
font-weight:bold;
top:50%;
}
/*End of Pay1*/
/*The history style*/
#transactionTable {
font-family:"Helvetica Neue", Helvetica, sans-serif
}
#tHead {
background: SteelBlue;
color: white;
}
/*
.th,
.td {
padding: 5px 10px;
}
*/
#transactionTable td, #transactionTable tr, #transactionTable th {
padding: 5px 10px;
}
#tBody tr:nth-child(even) {
background: WhiteSmoke;
}
#tBody tr td:nth-child(2) {
text-align:center;
}
#tBody tr td:nth-child(3),
#tBody tr td:nth-child(4) {
text-align: right;
font-family: monospace;
}
/*The end of history page*/
/* Register page */
.register_box {
width: 100%;
padding: 12px 20px ;
margin: 8px 0;
box-sizing: border-box;
background-color:white;
box-shadow: 0 0 35px #74ebe6;
border: 3px solid #74ebe6;
-webkit-transition: 0.5s;
transition: 0.5s;
outline: none;
position:relative;
}
#control_height {
padding-top:80px;
}
.register_box:focus {
border: 3px solid #5BF68A;
}
#reg_submit{
background-color: #74ebe6;
position: relative;
border: none;
color: black;
text-decoration: none;
margin-left: 30%;
cursor: pointer;
box-shadow: 0 0 35px #74ebe6;
border: 3px solid #74ebe6;
height:50px;
padding:5px;
margin-top: 0.10cm;
width:40%;
top:75%;
font-weight:bold;
}
#reg_back {
background-color: #74ebe6;
position: relative;
border: none;
color: black;
text-decoration: none;
margin-left: 30%;
cursor: pointer;
box-shadow: 0 0 35px #74ebe6;
border: 3px solid #74ebe6;
height:50px;
padding:5px;
margin-top: 0.20cm;
width:40%;
top:86%;
font-weight:bold;
}
#reg_colour {
background-color:white;
}
#reg_text {
font-weight:800;
font-size:50px;
}
.reg_font {
color: blue;
font-weight: bold;
display: block;
width: 50%;
position: absolute;
}
/*end of register page*/
/*The Pay 2 style*/
.pay_button, .scan_button {
background-color: #74ebe6;
box-shadow: 0 0 35px #74ebe6;
border: 3px solid #74ebe6;
border: 0;
width: 350px;
height: 40px;
position:relative;
margin-top:25%;
border-radius: 3px;
font-size: 12px;
cursor: pointer;
transition: background 0.3s ease-in-out;
}
.pay_button:hover, .scan_button:hover {
animation-name: shake;
}
/*The end of Pay 2*/
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../css/index.css">
<title>Registration</title>
</head>
<body id="register">
<h1 id="reg_text">Register</h1>
<div id="control_height">
<div id="register_form">
<form action="../index.html" onsubmit="insertUser()">
<label class="reg_font">Email Address:</label><br />
<!-- email regex found at https://www.wired.com/2008/08/four_regular_expressions_to_check_email_addresses/ on 05-12-2016 at 11.55 AM -->
<input type="text" class="register_box" name="email" title="I need a real email address" pattern="([a-z0-9][-a-z0-9_\+\.]*[a-z0-9])#([a-z0-9][-a-z0-9\.]*[a-z0-9]\.(arpa|root|aero|biz|cat|com|coop|edu|gov|info|int|jobs|mil|mobi|museum|name|net|org|pro|tel|travel|ac|ad|ae|af|ag|ai|al|am|an|ao|aq|ar|as|at|au|aw|ax|az|ba|bb|bd|be|bf|bg|bh|bi|bj|bm|bn|bo|br|bs|bt|bv|bw|by|bz|ca|cc|cd|cf|cg|ch|ci|ck|cl|cm|cn|co|cr|cu|cv|cx|cy|cz|de|dj|dk|dm|do|dz|ec|ee|eg|er|es|et|eu|fi|fj|fk|fm|fo|fr|ga|gb|gd|ge|gf|gg|gh|gi|gl|gm|gn|gp|gq|gr|gs|gt|gu|gw|gy|hk|hm|hn|hr|ht|hu|id|ie|il|im|in|io|iq|ir|is|it|je|jm|jo|jp|ke|kg|kh|ki|km|kn|kr|kw|ky|kz|la|lb|lc|li|lk|lr|ls|lt|lu|lv|ly|ma|mc|md|mg|mh|mk|ml|mm|mn|mo|mp|mq|mr|ms|mt|mu|mv|mw|mx|my|mz|na|nc|ne|nf|ng|ni|nl|no|np|nr|nu|nz|om|pa|pe|pf|pg|ph|pk|pl|pm|pn|pr|ps|pt|pw|py|qa|re|ro|ru|rw|sa|sb|sc|sd|se|sg|sh|si|sj|sk|sl|sm|sn|so|sr|st|su|sv|sy|sz|tc|td|tf|tg|th|tj|tk|tl|tm|tn|to|tp|tr|tt|tv|tw|tz|ua|ug|uk|um|us|uy|uz|va|vc|ve|vg|vi|vn|vu|wf|ws|ye|yt|yu|za|zm|zw)|([0-9]{1,3}\.{3}[0-9]{1,3}))" required /><br />
<label class="reg_font">Username:</label><br />
<input type="text" class="register_box" name="username" required /><br />
<label class="reg_font">Password</label><br />
<input type="text" class="register_box" name="password" title="Password Must include one uppercase letter, one special character, one lowecase letter and one number" onchange="validatePassword()" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$#$!%*?&])[A-Za-z\d$#$!%*?&]{8,}" required /><br />
<label class="reg_font">Confirm Password</label><br />
<input type="text" class="register_box" name="cpassword" onkeyup="validatePassword()" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$#$!%*?&])[A-Za-z\d$#$!%*?&]{8,}" required /><br />
<button id="reg_submit" type="submit">Sign Up</button>
</form>
<button id="reg_back" onclick="window.location.href='../index.html';">Go back to login screen</button>
</div>
</div>
<!--<script src="https://cdn.firebase.com/js/client/2.4.2/firebase.js"></script>-->
<script type="text/javascript" src="../cordova.js"></script>
<script type="text/javascript" src="../scripts/platformOverrides.js"></script>
<script type='text/javascript' src='https://cdn.firebase.com/js/client/1.0.15/firebase.js'></script>
<script type="text/javascript" src="../scripts/register.js"></script>
</body>
</html>
Related
I'm not a pro on coding, I created a popup script to use with a cpa redirect after user click the css button on the second popup.
But when user clicks the css button, nothing happens. I added a html button and it works like a charm. I tried to figure out the root cause but had no luck.
run the code here on w3schools.com
$(function() {
openUp('#overlay')
$("#popup").on('click', function() {
openUp('#overlay2')
closeDown('#overlay')
});
function openUp(el) {
$(el).fadeIn(500, function() {
$(this).next().show();
});
}
function closeDown(el) {
$(el).fadeOut(500, function() {
$(this).next().hide();
});
}
$('a').each(function(index, element) {
$(this).click(function(e) {
e.preventDefault();
});
});
});
#DIV_1 {
bottom: 0px;
box-shadow: rgba(255, 255, 255, 0.298) 0px 0px 2px 0px inset, rgba(255, 255, 255, 0.298) 0px 1px 0px 0px inset;
box-sizing: border-box;
color: rgb(255, 255, 255);
cursor: pointer;
display: inline-block;
height: 39px;
left: 0px;
letter-spacing: 2px;
position: relative;
right: 0px;
text-align: center;
text-decoration: none solid rgb(255, 255, 255);
text-shadow: rgb(0, 79, 132) 0px 1px 0px;
text-size-adjust: 100%;
top: 0px;
width: 135px;
column-rule-color: rgb(255, 255, 255);
perspective-origin: 53.2344px 19.5px;
transform-origin: 53.2344px 19.5px;
caret-color: rgb(255, 255, 255);
background: rgb(0, 109, 183) linear-gradient(0deg, rgb(0, 109, 183), rgb(0, 139, 234)) repeat scroll 0% 0% / auto padding-box border-box;
border-top: 1px solid rgb(0, 79, 132);
border-right: 1px solid rgb(0, 79, 132);
border-bottom: 2px solid rgb(0, 79, 132);
border-left: 1px solid rgb(0, 79, 132);
font: normal normal 700 normal 10px / 10px Lego, sans-serif;
outline: rgb(255, 255, 255) none 0px;
padding: 13px 14px;
}
/*#DIV_1*/
img {
width: 100%;
object-fit: scale-down;
min-width: 100%;
height: auto;
}
.form-style-5 {
max-width: 500px;
display: inline-block;
padding: 8px 16px;
background: #f4f7f8;
margin: 8px auto;
padding: 16px;
border-radius: 8px;
font-family: Georgia, "Times New Roman", Times, serif;
}
.form-style-5 fieldset {
border: none;
}
.form-style-5 legend {
font-size: 1.4em;
margin-bottom: 8px;
}
.form-style-5 label {
display: block;
margin-bottom: 6px;
}
.form-style-5 input[type="text"],
.form-style-5 input[type="date"],
.form-style-5 input[type="datetime"],
.form-style-5 input[type="email"],
.form-style-5 input[type="number"],
.form-style-5 input[type="search"],
.form-style-5 input[type="time"],
.form-style-5 input[type="url"],
.form-style-5 textarea,
.form-style-5 select {
font-family: Georgia, "Times New Roman", Times, serif;
background: rgba(255, 255, 255, .1);
border: none;
border-radius: 4px;
font-size: 16px;
margin: 0;
outline: 0;
padding: 7px;
width: 100%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
background-color: #e8eeef;
color: #8a97a0;
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
margin-bottom: 30px;
}
.form-style-5 input[type="text"]:focus,
.form-style-5 input[type="date"]:focus,
.form-style-5 input[type="datetime"]:focus,
.form-style-5 input[type="email"]:focus,
.form-style-5 input[type="number"]:focus,
.form-style-5 input[type="search"]:focus,
.form-style-5 input[type="time"]:focus,
.form-style-5 input[type="url"]:focus,
.form-style-5 textarea:focus,
.form-style-5 select:focus {
background: #d2d9dd;
}
.form-style-5 select {
-webkit-appearance: menulist-button;
height: 30px;
}
.form-style-5 input[type="submit"],
.form-style-5 input[type="button"] {
position: relative;
display: block;
padding: 17px 37px 16px 37px;
color: #000;
margin: 0 auto;
font-size: 18px;
text-align: center;
font-style: normal;
width: 100%;
border: 1px solid #ffcf00;
border-width: 1px 1px 3px;
margin-bottom: 10px;
background: rgb(255, 207, 0) none repeat scroll 0% 0% / auto padding-box border-box;
box-shadow: rgba(232, 105, 2, 0.5) 0px 0px 25px 0px inset;
}
.form-style-5 input[type="submit"]:hover,
.form-style-5 input[type="button"]:hover {
background: #ffae00;
}
.button {
display: inline-block;
border-radius: 4px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
width: 100%;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.1s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="https://www.verifycaptcha.com/contentlockers/load.php?id={removed my aff id}"></script>
<div id="overlay" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.05; filter: alpha(opacity=60); z-index: 99990; display: none"></div>
<div id="popup" style="position:fixed; display:none; top:110px; width:90%; height:auto; left: 0; right: 0; margin: 0 auto; background-color:#FFFFFF; z-index:99999; padding:5px; border:solid 2px #1d8cd0; border-radius:5px;">
<img class="aligncenter wp-image-21 size-full" src="https://images1.sykesassets.co.uk/assets/_files/cached/property/1500x1125/2906/sc_131608230613_2906_12.jpg" alt="ALT TEXT" width="492" height=a uto; />
<p <div id="DIV_1">
PROCEED >>
</p>
</div>
<div id="overlay2" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.1; filter: alpha(opacity=60); z-index: 99990; display: none"></div>
<div id="popup2" style="position:fixed; display:none; top:110px; width:85%; height:auto; left: 0; right: 0; margin: 0 auto; background-color:#FFFFFF; z-index:99999; padding:5px; border:solid 2px #1d8cd0; border-radius:5px;">
<p style="color:#FFFFFF;">
</p>
<div class="form-style-5">
<form>
<fieldset>
<legend><span class="number"></span> Please enter your information</legend>
<input type="text" name="field1" placeholder="Receiver's full name *">
<input type="email" name="field2" placeholder="Email *">
<textarea name="field3" placeholder="Shipping address:"></textarea>
<label for="job">Country:</label>
<select id="job" name="field4">
<option value="USA">USA</option>
<option value="UK">UK</option>
</select>
<textarea name="field5" placeholder="Greeting message: Eg. Hi Jonathan, ..Loving sister, Christina."></textarea>
</fieldset>
<button type="button" id="myBtn" onclick="og_load();">Apply</button>
<button class="button" style="vertical-align:middle" onclick="og_load();"><span>Apply </span></button>
</form>
</div>
</div>
<head>
<script type="text/javascript" src="https://www.verifycaptcha.com/contentlockers/load.php?(removed my affiliate code)"></script>
</head>
Not sure what a 'css-button' is, but why not just add your .button class to the button like so:
<button class="button" type="button" id="myBtn" onclick="og_load();">Apply</button>
I have a scenario,that I used css for extending search box on focus,when I focussed on search box then the search box must decrease and the cancel button must be placed beside of search box.
Css:
.clrble .frmcntr {
background:url("images/search.png") no-repeat 110px center;
text-align: center;
border-radius: 4px;
border: medium none;
cursor: pointer;
font-size: 20px;
font-family:SFUIDisplay;
padding: 6px 10px 6px 10px;
transition: all 0.5s ease 0s;
width: 95%;
background-color:rgba(247, 247, 247, 1);
}
: content-box;
font-size: 100%;
.clrble .frmcntr:focus {
width: 70%;
text-align: left;
background-color: #fff;
border-color: #66CC75;
-webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
-moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
box-shadow: 0 0 5px rgba(109,207,246,.5);
background-color:rgba(247, 247, 247, 1);
background:url("images/search.png") no-repeat 10px center;
padding-left:40px;
}
.clrble .frmcntr {
-webkit-appearance: textfield;
-webkit-box-sizing
}
Here is my plunker link:
https://plnkr.co/edit/Z7mfglWEoDyjbDfFDbLM?p=preview
And the expected output will be like this:
Is it possible with Angularjs or JavaScript?
Possible solution would be to position the div you want absolutely. Then on focus of the input, make the div visible or slide it into view;
Using your plunk, add the following CSS:
.clrble{
position: relative;
}
.frmcntr:focus + .btn{
display: block;
}
.btn{display: none; position: absolute; right: 0;}
and here's the HTML:
<div class="clrble">
<input type="text" placeholder="Search" class="frmcntr">
<div class="btn">button here</div>
</div>
It's not perfect, but i think it will point you in the right direction.
with float property you can mange the side by side positions.
use float:left; css property for you textbox class and that will work for your requirement and the placement of button also can be handle by css also.
css for textbox
.clrble .frmcntr {
background:url("images/search.png") no-repeat 110px center;
text-align: center;
border-radius: 4px;
border: medium none;
cursor: pointer;
font-size: 20px;
font-family:SFUIDisplay;
padding: 6px 10px 6px 10px;
transition: all 0.5s ease 0s;
width: 95%;
background-color:rgba(247, 247, 247, 1);
float:left;
}
You can just hide and show a span with 'cancel' in it.
/* Styles go here */
.clrble .frmcntr {
background: url("images/search.png") no-repeat 110px center;
text-align: center;
border-radius: 4px;
border: medium none;
cursor: pointer;
font-size: 20px;
font-family: SFUIDisplay;
padding: 6px 10px 6px 10px;
transition: all 0.5s ease 0s;
width: 95%;
background-color: rgba(247, 247, 247, 1);
}
.clrble .frmcntr:focus {
width: 70%;
text-align: left;
background-color: #fff;
border-color: #66CC75;
-webkit-box-shadow: 0 0 5px rgba(109, 207, 246, .5);
-moz-box-shadow: 0 0 5px rgba(109, 207, 246, .5);
box-shadow: 0 0 5px rgba(109, 207, 246, .5);
background-color: rgba(247, 247, 247, 1);
background: url("images/search.png") no-repeat 10px center;
padding-left: 40px;
}
.clrble .frmcntr {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-size: 100%;
}
.clrble {
position: relative;
}
.frmcntr:focus+.btn {
display: block;
}
.btn {
display: none;
position: absolute;
right: 0;
}
.cancel {
visibility: hidden;
color: blue;
font-family: sans-serif;
font-size: 20px;
}
.frmcntr:focus + .cancel {
visibility: visible;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="clrble">
<input type="text" placeholder="Search" class="frmcntr">
<span class="cancel">Cancel</span>
<span class="btn">button here</span>
</div>
</body>
</html>
You can use the blur event for the input and the mousedown event as mousedown event fires before the blur event.
var mouseDown = false;
$('input').blur(function() {
if(mouseDown) // cancel the blur event
{
$('input').focus();
mouseDown = false;
}
});
$('#cancelBtn').mousedown(function(){
mouseDown = true;
console.log('Button Clicked');
});
$('input').focus(function(){
$('#cancelBtn').css('display', 'block');
});
$('input').focusout(function(){
$('#cancelBtn').css('display', 'none');
});
/* Styles go here */
.clrble .frmcntr {
background:url("images/search.png") no-repeat 110px center;
text-align: center;
border-radius: 4px;
border: medium none;
cursor: pointer;
font-size: 20px;
font-family:SFUIDisplay;
padding: 6px 10px 6px 10px;
transition: all 0.5s ease 0s;
width: 95%;
background-color:rgba(247, 247, 247, 1);
float:left;
}
.clrble .frmcntr:focus {
width: 70%;
text-align: left;
background-color: green;
border-color: #66CC75;
-webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
-moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
box-shadow: 0 0 5px rgba(109,207,246,.5);
background-color:rgba(247, 247, 247, 1);
background:url("images/search.png") no-repeat 10px center;
padding-left:40px;
}
.clrble .frmcntr {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-size: 100%;
}
#cancelBtn {
color:blue;
float:left;
font-weight:bold;
display:none;
padding:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="clrble">
<input type="text" placeholder="Search" class="frmcntr">
<div id="cancelBtn">Cancel</div>
</div>
</body>
</html>
My css is listed below, followed by the html.
I am not currently aware of a method to centralize the buttons within the below detailed "box/inner-box" s. The flex display seems to be stacking the buttons vertically (though, honestly, I am not certain as to how), but, no matter what I try, and I have tried most searchable recommendations, I cannot seem to locate the column of buttons to the centre of the page, beneath the 'my name' . Does anyone know how I might centralize the buttons or if there is a much simpler method for accomplishing a similar aesthetic? I am open to all solutions. Thank you in advance!
html, body {
height: 100%;
background: #ffffff;
overflow: hidden;
color: #000000;
font-family: 'Raleway';
font-size: 18px;
}
h1 {
font-weight: 200;
margin-bottom: 0.5em;
text-align: center;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
background-color: #ffffff;
width: 90%;
max-width: 1920px;
padding: 5px;
border: 2px solid #000000;
}
.box .box-inner {
position: relative;
border: 2px solid #000000;
padding: 40px;
}
.btn {
box-sizing: border-box;
appearance: none;
background-color: transparent;
border: 2px solid #000000;
border-radius: 0.6em;
color: #000000;
cursor: pointer;
font-size: 18px;
font-weight: 400;
line-height: 1;
margin: 12px;
padding: 1.2em 1.5em;
display: flex;
text-transform: uppercase;
font-family: 'Raleway';
font-weight: 400;
}
.btn:hover, .btn:focus {
color: #000000;
outline: 0;
}
.me {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.me:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.cv {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.cv:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.rd {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.rd:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.av {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.av:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.rr {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.rr:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
<body>
<div class='box'>
<div class='box-inner'>
<h1>myname</h1>
<button class="btn me">me</button>
<button class="btn cv">cv</button>
<button class="btn rd">rd</button>
<button class="btn av">av</button>
<button class="btn rr">rr</button>
</div>
</div>
</body>
I know you already have multiple answers. However the way you use flex is not correct. It should be added into the parent div box-inner
display:flex;
align-items:center; //align item center
flex-direction:column; //direction to column
html, body {
height: 100%;
background: #ffffff;
overflow: hidden;
color: #000000;
font-family: 'Raleway';
font-size: 18px;
}
h1 {
font-weight: 200;
margin-bottom: 0.5em;
text-align: center;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
background-color: #ffffff;
width: 90%;
max-width: 1920px;
padding: 5px;
border: 2px solid #000000;
}
.box .box-inner {
position: relative;
border: 2px solid #000000;
padding: 40px;
display:flex;
align-items:center;
flex-direction:column;
}
.btn {
box-sizing: border-box;
appearance: none;
background-color: transparent;
border: 2px solid #000000;
border-radius: 0.6em;
color: #000000;
cursor: pointer;
font-size: 18px;
font-weight: 400;
line-height: 1;
margin: 12px;
padding: 1.2em 1.5em;
text-transform: uppercase;
font-family: 'Raleway';
font-weight: 400;
}
.btn:hover, .btn:focus {
color: #000000;
outline: 0;
}
.me {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.me:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.cv {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.cv:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.rd {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.rd:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.av {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.av:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.rr {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.rr:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
<body>
<div class='box'>
<div class='box-inner'>
<h1>myname</h1>
<button class="btn me">me</button>
<button class="btn cv">cv</button>
<button class="btn rd">rd</button>
<button class="btn av">av</button>
<button class="btn rr">rr</button>
</div>
</div>
</body>
Check out this code: you need to have a margin: 0 auto, and add text-align:center.
html, body {
height: 100%;
background: #ffffff;
overflow: hidden;
color: #000000;
font-family: 'Raleway';
font-size: 18px;
}
h1 {
font-weight: 200;
margin-bottom: 0.5em;
text-align: center;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
background-color: #ffffff;
width: 90%;
max-width: 1920px;
padding: 5px;
border: 2px solid #000000;
}
.box .box-inner {
position: relative;
border: 2px solid #000000;
padding: 40px;
}
.btn {
box-sizing: border-box;
display: block;
margin: 0 auto;
appearance: none;
background-color: transparent;
border: 2px solid #000000;
border-radius: 0.6em;
color: #000000;
cursor: pointer;
font-size: 18px;
font-weight: 400;
line-height: 1;
padding: 1.2em 1.5em;
display: flex;
text-transform: uppercase;
font-family: 'Raleway';
font-weight: 400;
}
.btn:hover, .btn:focus {
color: #000000;
outline: 0;
}
.me {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.me:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.cv {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.cv:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.rd {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.rd:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.av {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.av:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.rr {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.rr:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
Simply add below CSS
.box
{
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100px;
height: 100%;
}
.box .btn {
display: block;
margin: 0 auto;
}
and modify you HTML too
<body>
<div class="box">
<h1>myname</h1>
<button class="btn me">me</button>
<button class="btn cv">cv</button>
<button class="btn rd">rd</button>
<button class="btn av">av</button>
<button class="btn rr">rr</button>
</div>
</body>
this will place buttons in center of page, both horizontally and vertically.
check out this code: you need to have a margin 0 auto, and add text-align:center
html, body {
height: 100%;
background: #ffffff;
overflow: hidden;
color: #000000;
font-family: 'Raleway';
font-size: 18px;
}
h1 {
font-weight: 200;
margin-bottom: 0.5em;
text-align: center;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
background-color: #ffffff;
width: 90%;
max-width: 1920px;
padding: 5px;
border: 2px solid #000000;
}
.box .box-inner {
position: relative;
border: 2px solid #000000;
padding: 40px;
}
.btn {
box-sizing: border-box;
display: block;
margin: 0 auto;
appearance: none;
background-color: transparent;
border: 2px solid #000000;
border-radius: 0.6em;
color: #000000;
cursor: pointer;
font-size: 18px;
font-weight: 400;
line-height: 1;
padding: 1.2em 1.5em;
display: flex;
text-transform: uppercase;
font-family: 'Raleway';
font-weight: 400;
}
.btn:hover, .btn:focus {
color: #000000;
outline: 0;
}
.me {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.me:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.cv {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.cv:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.rd {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.rd:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.av {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.av:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.rr {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.rr:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
<body>
<div class='box'>
<div class='box-inner'>
<h1>myname</h1>
<button class="btn me">me</button>
<button class="btn cv">cv</button>
<button class="btn rd">rd</button>
<button class="btn av">av</button>
<button class="btn rr">rr</button>
</div>
</div>
</body>
I've come across the following code online for a nice button that when clicked appears to be pressed.
I'd like to add a transition with the button appearing pressed on hover not on click.
How can I do this?
/**
* AddToCalendar Icon Style
* http://addtocalendar.com
*/
/* Base */
.addtocalendar var{
display: none;
}
.addtocalendar {
position: relative;
display: inline-block;
background: transparent!important;
}
.atcb-link {
display: block;
outline: none!important;
cursor: pointer;
}
.atcb-link:focus~ul,
.atcb-link:active~ul,
.atcb-list:hover{
visibility:visible;
}
.atcb-list {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
width: 170px;
z-index: 900;
}
.atcb-list,
.atcb-item
{
list-style: none;
margin: 0;
padding: 0;
background: #fff;
}
.atcb-item {
float: none;
text-align: left;
}
.atcb-item-link
{
text-decoration: none;
outline: none;
display: block;
}
.atcb-item.hover,
.atcb-item:hover {
position: relative;
z-index: 900;
cursor: pointer;
text-decoration: none;
outline: none;
}
/* Orange */
.atc-style-glow-orange .atcb-list{
margin: 10px 0px 0px 0px;
padding: 0;
color: #fff;
line-height: 1.3em;
vertical-align: middle;
zoom: 1;
border-radius: 4px;
}
.atc-style-glow-orange .atcb-link
{
position: relative;
color: rgba(255,255,255,1);
text-decoration: none;
background-color: rgba(219,87,5,1);
font-size: 1em;
display: block;
padding: 4px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 12px rgba(0,0,0,.7);
-moz-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 12px rgba(0,0,0,.7);
box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 12px rgba(0,0,0,.7);
text-align: center;
-webkit-transition: all .1s ease;
-moz-transition: all .1s ease;
-ms-transition: all .1s ease;
-o-transition: all .1s ease;
transition: all .1s ease;
}
.atc-style-glow-orange .atcb-link:active {
-webkit-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
-moz-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
position: relative;
top: 6px;
}
.atc-style-glow-orange .atcb-link,
.atc-style-glow-orange .atcb-link:hover,
.atc-style-glow-orange .atcb-link:active,
.atc-style-glow-orange .atcb-link:focus
{
color: #fff;
font-family: "Verdana";
font-size: 14px;
text-decoration: none;
outline: none;
padding: 7px 25px;
}
.atc-style-glow-orange .atcb-list {
width: 170px;
border: 1px solid #fff;
border: 1px solid rgb(186,186,186);
border-radius: 2px;
box-shadow: 0 0 5px #AAA;
}
.atc-style-glow-orange .atcb-list,
.atc-style-glow-orange .atcb-item
{
background: #fff;
color: #000;
}
.atc-style-glow-orange .atcb-item,
.atc-style-glow-orange .atcb-item-link
{
line-height: 1.3em;
vertical-align: middle;
zoom: 1;
}
.atc-style-glow-orange .atcb-item-link,
.atc-style-glow-orange .atcb-item-link:hover,
.atc-style-glow-orange .atcb-item-link:active,
.atc-style-glow-orange .atcb-item-link:focus
{
color: #000;
font-family: "Verdana";
font-size: 14px;
text-decoration: none;
outline: none;
padding: 5px 15px;
}
.atc-style-glow-orange .atcb-item-link:hover,
.atc-style-glow-orange .atcb-item-link:active,
.atc-style-glow-orange .atcb-item-link:focus
{
color: #fff;
background: rgba(219,87,5,1);
}
.atc-style-glow-orange .atcb-item.hover,
.atc-style-glow-orange .atcb-item:hover {
background: rgba(250,203,175,1);
}
<span class="addtocalendar atc-style-glow-orange" id="atc_btn_orange" data-on-button-click="atcButtonClick" data-on-calendar-click="atcCalendarClick">
<a class="atcb-link">Add to Calendar</a>
</span>
</div>
Provide hover to the class which you need like,
.classname:hover{
background-color:#FF0000;
}
Change this:
.atc-style-glow-orange .atcb-link:active {
to this:
.atc-style-glow-orange .atcb-link:hover {
Here is the JSFiddle demo
Only Safari shows the arrow on all elements below.
Normally all browsers show something like this:
Can't really post the whole site, but related HTML
and some styles:
#searchMain{
float:right;
width: 17rem;
height:261px;
margin-left:8px;
margin-right: 8px;
margin-bottom: 9px;
}
.searchDiv{
float:right;
width: 17rem;
height: 12.5%;
/* margin-bottom: .53rem; */
padding: 0px 0rem 11px 0rem;
text-align: center;
}
::-webkit-input-placeholder { color: #10376E; }
:-moz-placeholder { color: #10376E; }
::-moz-placeholder { color: #10376E; }
:-ms-input-placeholder { color: #10376E; }
#dateFrom:disabled::-webkit-input-placeholder { color: #cccccc; }
#dateFrom:disabled:-moz-placeholder { color: #cccccc; }
#dateFrom:disabled::-moz-placeholder { color: #cccccc; }
#dateFrom:disabled:-ms-input-placeholder { color: #cccccc; }
#dateTo:disabled::-webkit-input-placeholder { color: #cccccc; }
#dateTo:disabled:-moz-placeholder { color: #cccccc; }
#dateTo:disabled::-moz-placeholder { color: #cccccc; }
#dateTo:disabled:-ms-input-placeholder { color: #cccccc; }
/*
background:url(./down.png) no-repeat right center;
padding-right:10px;
*/
.searchDiv select,
.searchDiv input{
margin-bottom:0em;
width: 256px;
height: 1.4rem;
color: #10376E;
border: solid 1px #10376E;
border-radius:9px;
outline: none;
background-color:rgba(250, 255, 250, 0.7);
}
.searchDiv[select_box='true']:after {
content:'>';
font:11px "Consolas", monospace;
color:white;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-ms-transform:rotate(90deg);
transform:rotate(90deg);
right:8px; top:2px;
padding:0 0 2px;
margin: 2px 0px 0px 0px;
position:absolute;
pointer-events:none;
}
.disabled
{
color: #cccccc;
border: solid 1px #cccccc;
}
.searchDiv[select_box='true']:before {
content:'';
right:0px; top:0px;
width:18px; height:22px;
background:#10376E;
position:absolute;
pointer-events:none;
display:block;
-webkit-border-top-right-radius: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-topright: 9px;
-moz-border-radius-bottomright: 9px;
border-top-right-radius: 9px;
border-bottom-right-radius: 9px;
}
.searchDiv
{
width:256px;
overflow: hidden;
text-align: justify;
position:relative;
}
.searchDiv select
{
width:256px;
}
.searchDiv input{
padding: 0 3%;
}
.searchDiv input:focus{
background-color: white;
box-shadow: 0px 1px 10px 0px rgba(100, 100, 255, 0.3);
}
.searchDiv h3{
margin-top: .4em;
font-weight: bold;
}
#dateFrom,
#dateTo{
width:49%;
}
.resetSearch{
width: 256px;
height:22px;
text-align: center;
border-radius:9px;
background-color:#749FAF;
padding:.2em;
background-color: #10376E;
color: white;
border: solid 1px #10376E;
}
.resetSearch:hover{
color: #10376E;
background-color: white;
}
.resetSearch a, .resetSearch a:visited{
color: inherit;
text-decoration:none;
}
I'm not sure if information above is enough to understand the problem(hope it's well known issue), but I want to prevent Safari from showing those arrows and render them just like in other browsers.
You should try using the pseudo-element (::after) instead of using the pseudo-class (:after), which is a distinction introduced in CSS3.
Research:
MDN :after