For a few days i'm fighting with this code, and I can't make it responsive to integrate it in wordpress as a raw html/css/JS code. Could you help me to make this form responsive ? They don't offer support for forms. Thanks.
.pika-single {
z-index: 9999;
display: block;
position: relative;
width: 240px;
padding: 8px;
color: #333;
background: #fff;
border: 1px solid #ccc;
border-bottom-color: #bbb;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
.pika-single.is-hidden {
display: none;
}
.pika-single.is-bound {
position: absolute;
box-shadow: 0 5px 15px -5px rgba(0,0,0,.5);
}
.pika-title {
position: relative;
text-align: center;
}
.pika-label {
display: inline-block;
position: relative;
z-index: 9999;
overflow: hidden;
margin: 0;
padding: 5px 3px;
font-size: 14px;
line-height: 20px;
font-weight: 700;
background-color: #fff;
}
.pika-title select {
cursor: pointer;
position: absolute;
z-index: 9998;
margin: 0;
left: 0;
top: 5px;
opacity: 0;
}
.pika-next,.pika-prev {
display: block;
cursor: pointer;
position: relative;
outline: 0;
color: #fff;
border: 0;
padding: 0;
width: 20px;
height: 30px;
background-color: transparent;
background-position: center center;
background-repeat: no-repeat;
background-size: 75% 75%;
white-space: nowrap;
text-indent: 100%;
overflow: hidden;
opacity: .5;
}
.pika-next:hover,.pika-prev:hover {
opacity: 1;
}
.is-rtl .pika-next,.pika-prev {
float: left;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAUklEQVR42u3VMQoAIBADQf8Pgj+OD9hG2CtONJB2ymQkKe0HbwAP0xucDiQWARITIDEBEnMgMQ8S8+AqBIl6kKgHiXqQqAeJepBo/z38J/U0uAHlaBkBl9I4GwAAAABJRU5ErkJggg==);
}
.is-rtl .pika-prev,.pika-next {
float: right;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII=);
}
.pika-next.is-disabled,.pika-prev.is-disabled {
cursor: default;
opacity: .2;
}
.pika-select {
display: inline-block;
}
.pika-table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
border: 0;
}
.pika-table td,.pika-table th {
width: 14.285714285714%;
}
.pika-table th {
color: #999;
font-size: 12px;
line-height: 25px;
font-weight: 700;
text-align: center;
}
.pika-button {
cursor: pointer;
display: block;
outline: 0;
border: 0;
margin: 0;
width: 100%;
padding: 5px;
color: #666;
font-size: 12px;
line-height: 15px;
text-align: right;
background: #f5f5f5;
}
.is-today .pika-button {
color: #3af;
font-weight: 700;
}
.is-selected .pika-button {
color: #fff;
font-weight: 700;
background: #3af;
box-shadow: inset 0 1px 3px #178fe5;
border-radius: 3px;
}
.is-disabled .pika-button {
pointer-events: none;
cursor: default;
color: #999;
opacity: .3;
}
.pika-button:hover {
color: #fff !important;
background: #ff8000 !important;
box-shadow: none !important;
border-radius: 3px !important;
}
.pika-time {
width: 50%;
margin: 0 auto;
}
.pika-time tbody {
text-align: center;
}
.pika-time-sep {
width: 10px;
}
.pika-ok {
position: absolute;
bottom: 7px;
right: 7px;
cursor: pointer;
}
.TurnKeyCRM {
margin: 10px auto;
width: 600px;
display: block;
}
.TurnKeyCRM label.Required {
font-weight: 700;
}
.TurnKeyCRM label.Required:after {
content: " *";
}
.TurnKeyCRM fieldset {
margin: 20px 10px;
clear: both;
-moz-border-radius: 4px;
-khtml-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 3px;
background: #fff;
padding: 10px;
position: relative;
border: 1px solid #ddd;
}
.TurnKeyCRM legend {
font-size: 17px;
font-weight: 700;
line-height: 1em;
color: #343434;
}
.TurnKeyCRM label {
color: #333;
font-size: 14px;
line-height: 20px;
width: 160px;
float: left;
text-align: right;
padding-top: 5px;
word-break: break-word;
}
.TurnKeyCRM label.SetLabel {
width: 160px;
float: none;
text-align: left;
line-height: 23px;
}
.TurnKeyCRM input[type=button],.TurnKeyCRM input[type=submit] {
margin-left: auto;
margin-right: auto;
clear: both;
display: block;
height: 41px;
font-size: 14px;
font-weight: 700;
padding: 4px 9px;
text-shadow: 0 0 1px rgba(0,0,0,.15);
-moz-box-shadow: rgba(0,0,0,.15) 0 0 2px;
-webkit-box-shadow: rgba(0,0,0,.15) 0 0 2px;
-khtml-box-shadow: rgba(0,0,0,.15) 0 0 2px;
box-shadow: rgba(0,0,0,.15) 0 0 2px;
-moz-border-radius: 4px;
-khtml-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
float: none;
color: #666 !important;
margin-top: 15px;
border: 1px solid #bbb;
background: #f2f2f2;
background: -webkit-gradient(linear,left top,left bottom,from(#f2f2f2),to(#e5e5e5));
background: -moz-linear-gradient(top,#f8f8f8,#e8e8e8);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f2f2',endColorstr='#e5e5e5');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f2f2',endColorstr='#e5e5e5')";
}
.TurnKeyCRM input[type=button]:hover,.TurnKeyCRM input[type=submit]:hover {
cursor: pointer;
color: #333 !important;
border: 1px solid #888;
background: -webkit-gradient(linear,left top,left bottom,from(#e5e5e5),to(#f2f2f2));
background: -moz-linear-gradient(top,#e5e5e5,#f2f2f2);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e5e5e5',endColorstr='#f2f2f2');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#e5e5e5',endColorstr='#f2f2f2')";
}
.TurnKeyCRM input[type=date],.TurnKeyCRM input[type=file],.TurnKeyCRM input[type=password],.TurnKeyCRM input[type=text],.TurnKeyCRM select,.TurnKeyCRM textarea {
font-family: arial,helvetica,clean,sans-serif;
width: 300px;
height: 30px;
color: #555;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
margin: 8px 0 6px 180px;
display: block;
font-size: 14px;
}
.TurnKeyCRM input[type=date],.TurnKeyCRM input[type=password],.TurnKeyCRM input[type=text],.TurnKeyCRM select,.TurnKeyCRM textarea {
-moz-background-clip: border;
-moz-background-inline-policy: continuous;
-moz-background-origin: padding;
-moz-border-radius: 4px;
-khtml-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
border: 1px solid #ccc;
padding: 4px 6px;
line-height: 20px;
background: #fff;
box-sizing: border-box;
}
.TurnKeyCRM input[type=file] {
-moz-background-clip: border;
-moz-background-inline-policy: continuous;
-moz-background-origin: padding;
background: #fff;
box-sizing: border-box;
}
.TurnKeyCRM .InputBlock {
margin-bottom: 15px;
clear: both;
}
.TurnKeyCRM .InputBlock>div {
margin-left: 180px;
}
.TurnKeyCRM .InputBlock>.Description {
margin-left: 180px;
color: #999;
}
.TurnKeyCRM textarea {
height: 100px;
}
.TurnKeyCRM a,.TurnKeyCRM a:visited {
color: #3679c6;
}
.TurnKeyCRM a:hover {
color: #D35D24;
}
.TurnKeyCRM .Response {
margin-left: auto;
margin-right: auto;
clear: both;
display: block;
width: 80%;
}
.TurnKeyCRM .ResponseError {
color: #B94A48;
background-color: #F2DEDE;
border-color: #EED3D7;
padding: 8px 14px;
-moz-border-radius: 4px;
-khtml-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
display: block;
}
.TurnKeyCRM .Error {
border: 1px solid #B94A48 !important;
color: #B94A48 !important;
}
.TurnKeyCRM .ErrorLabel {
color: #B94A48 !important;
font-weight: 700;
}
.TurnKeyCRM.Custom-tiny fieldset {
margin: 10px 5px;
-moz-border-radius: 2px;
-khtml-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
padding: 5px;
}
.TurnKeyCRM.Custom-tiny legend {
font-size: 14px;
line-height: .8em;
}
.TurnKeyCRM.Custom-tiny label {
font-size: 11px;
line-height: 16px;
padding-top: 3px;
}
.TurnKeyCRM.Custom-tiny input[type=button],.TurnKeyCRM.Custom-tiny input[type=submit] {
height: 31px;
font-size: 11px;
padding: 2px 5px;
-moz-border-radius: 2px;
-khtml-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
margin-top: 9px;
}
.TurnKeyCRM.Custom-tiny input[type=date],.TurnKeyCRM.Custom-tiny input[type=password],.TurnKeyCRM.Custom-tiny input[type=text],.TurnKeyCRM.Custom-tiny select,.TurnKeyCRM.Custom-tiny textarea {
-moz-border-radius: 2px;
-khtml-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
font-size: 11px;
margin-bottom: 3px;
margin-top: 4px;
padding: 2px 3px;
height: 20px;
line-height: 16px;
}
.TurnKeyCRM.Custom-tiny .InputBlock {
margin-bottom: 10px;
}
.TurnKeyCRM.Custom-tiny textarea {
height: 75px;
}
.TurnKeyCRM.Custom-small fieldset {
margin: 15px 7px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 2px;
padding: 7px;
}
.TurnKeyCRM.Custom-small legend {
font-size: 15px;
line-height: .9em;
}
.TurnKeyCRM.Custom-small label {
font-size: 12px;
line-height: 18px;
padding-top: 4px;
}
.TurnKeyCRM.Custom-small input[type=button],.TurnKeyCRM.Custom-small input[type=submit] {
height: 35px;
font-size: 12px;
padding: 3px 7px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
margin-top: 12px;
}
.TurnKeyCRM.Custom-small input[type=date],.TurnKeyCRM.Custom-small input[type=password],.TurnKeyCRM.Custom-small input[type=text],.TurnKeyCRM.Custom-small select,.TurnKeyCRM.Custom-small textarea {
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
font-size: 12px;
margin-bottom: 5px;
margin-top: 6px;
padding: 3px 4px;
height: 25px;
line-height: 18px;
}
.TurnKeyCRM.Custom-small .InputBlock {
margin-bottom: 12px;
}
.TurnKeyCRM.Custom-small textarea {
height: 90px;
}
.TurnKeyCRM.Custom-large fieldset {
margin: 25px 15px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 4px;
padding: 12px;
}
.TurnKeyCRM.Custom-large legend {
font-size: 19px;
line-height: 1.2em;
}
.TurnKeyCRM.Custom-large label {
font-size: 16px;
line-height: 24px;
padding-top: 7px;
}
.TurnKeyCRM.Custom-large input[type=button],.TurnKeyCRM.Custom-large input[type=submit] {
height: 45px;
font-size: 16px;
padding: 6px 12px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
margin-top: 18px;
}
.TurnKeyCRM.Custom-large input[type=date],.TurnKeyCRM.Custom-large input[type=password],.TurnKeyCRM.Custom-large input[type=text],.TurnKeyCRM.Custom-large select,.TurnKeyCRM.Custom-large textarea {
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
font-size: 16px;
margin-bottom: 8px;
margin-top: 10px;
padding: 6px 8px;
height: 36px;
line-height: 24px;
}
.TurnKeyCRM.Custom-large .InputBlock {
margin-bottom: 18px;
}
.TurnKeyCRM.Custom-large textarea {
height: 120px;
}
<script src="https://r3.minicrm.ro/api/minicrm.js?t=1470730609"></script>
<form FormHash="29074-1vmo1w4eti26ekzhtj8e" action="https://r3.minicrm.ro/Api/Signup" method="post" class="TurnKeyCRM">
<fieldset>
<legend>Persoana</legend>
<div class='InputBlock'>
<label for="Contact_LastName_1181" class="Required">Nume and surname</label>
<input name="Contact[1181][LastName]" id="Contact_LastName_1181" language="RO" type="text" />
</div>
<div class='InputBlock'>
<label for="Contact_Phone_1181" class="Required">Telefon</label>
<input name="Contact[1181][Phone]" id="Contact_Phone_1181" language="RO" type="text" />
</div>
<div class='InputBlock'>
<label for="Contact_Email_1181" class="Required">Email</label>
<input name="Contact[1181][Email]" id="Contact_Email_1181" language="RO" type="text" />
</div>
<div class='InputBlock'>
<label for="Project_DataCreare_1179" >Data creare</label>
<input id="Project_DataCreare_1179" type="text" name="Project[1179][DataCreare] " autocomplete="off"><script>try { setTimeout(function() { var picker = new Pikaday({ field: document.getElementById("Project_DataCreare_1179"), yearRange: [1900,2023], firstDay: 1, showMeridian: false, minuteStep: 5, showTimePicker: true, format: "YYYY. MM. DD. HH:mm", defaultDate: " ", i18n: {
months : ["Ianuarie","Februarie,"Martie","Aprilie","Mai","Iunie","Iulie","August","Septembrie","Octombrie","Noiembrie","Decembrie"],
weekdays : ["Duminică","Luni","Marți","Miercuri","Joi","Vineri","Sâmbătă"],
weekdaysShort : ["Du","Lu","Ma","Mi.","Jo","Vi","Sb."],
timeTitles : ["Oră", "Minut"]
} }); }, 300); } catch(e) {}</script>
</div>
</fieldset>
<div id="Response_29074-1vmo1w4eti26ekzhtj8e" style="display: none;" class="Response"></div>
<input id="Submit_29074-1vmo1w4eti26ekzhtj8e" type="Submit" value="Trimite">
</form>
I have this login form, which works and looks just fine in Chrome, IE11 and Edge but when try it out on Firefox, it looks completely different;
My labels are not the same width, so I have to re-adjust them. Also, my submit button doesn't seem to take on styles.
How can I make this work with Firefox as well?
My HTML:
<div class="loginheader">تسجيل الدخول</div>
<div class="loginform">
<form action="login.php" method="post" name="myform" id="myform">
<p>
<label for="loginform">اسم المستخدم</label>
<input type="text" name="username" id="login" value="mohammed.nasyia#gmail.com" placeholder="اسم المستخدم" />
</p>
<p>
<label for="loginform">كلمة المرور</label>
<input type="password" name="password" id="password" value="mohammed.nasyia#gmail.com" placeholder="كلمة المرور" />
</p>
<p >
<input type="submit" name="submit" value="تسجيل الدخول" class="button admin-login-button"/>
</p>
</form>
</div>
<div class="loginfooter">
تسجيل الدخول كممتحن
</div>
</div>
CSS:
.login-container {
margin-top: 100px;
margin-bottom: 50px;
margin-left: auto;
margin-right: auto;
width: 600px;
}
.loginform {
direction:RTL;
padding: 55px;
background-color: #fff;
border: 1px solid #eee;
border-bottom: 0px;
border-top: 0px;
}
.loginheader {
text-align: center;
background-color: #f5f5f5;
padding: 15px 0px;
border-radius: 10px 10px 0 0;
font-size: 30px;
}
.loginfooter {
padding: 15px 40px;
background-color: #f5f5f5;
border-radius: 0px 0px 10px 10px;
font-size: 18px;
text-align: center;
}
.loginheader, .loginfooter {
background-color: #f5f5f5;
border: 1px solid #ededed;
}
a {
text-decoration: none;
color: #000;
}
input[type=text], input[type=password] {
padding: 0 10px;
width: 320px;
height: 38px;
font-size: 16px;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
}
label {
float: rihgt;
width: 100px;
line-height: 40px;
padding-left: 10px;
font-size: 18px;
text-align: left;
display: inline-block;
margin: 10px 0px;
}
.edit-examinee label{
float: rihgt;
width: 130px;
line-height: 40px;
padding-left: 10px;
font-size: 18px;
text-align: left;
display: inline-block;
margin: 10px 0px;
}
.loginform label {
float: rihgt;
width: 100px;
line-height: 40px;
padding-left: 10px;
font-size: 18px;
text-align: left;
display: inline-block;
margin: 10px 0px;
}
.button {
display: inline-block;
zoom: 1;
padding: 12px 30px;
margin: 0;
cursor: pointer;
border: 1px solid #bbb;
overflow: visible;
font: bold 16px arial, helvetica, sans-serif;
text-decoration: none;
white-space: nowrap;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
.admin-login-button {
margin-right: 350px;
color: #333;
background-color: #fff;
border-color: #ccc;
}
.admin-login-button:hover {
color: #333;
background-color: #e6e6e6;
border-color: #adadad;
}
.admin-login-button:active {
color: #333;
background-color: #e6e6e6;
border-color: #adadad;
position: relative;
top: 2px;
text-shadow: none;
box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
}
You can also check the JSFiddle of the form.
I removed the floats (with a typo), set the margin to left on the .admin-login-button. I also added a media query for smaller screens.
https://jsfiddle.net/6p4v9hs6/7/
New CSS here:
.login-container {
margin-top: 100px;
margin-bottom: 50px;
margin-left: auto;
margin-right: auto;
width: 600px;
}
.loginform {
direction:RTL;
padding: 55px;
background-color: #fff;
border: 1px solid #eee;
border-bottom: 0px;
border-top: 0px;
}
.loginheader {
text-align: center;
background-color: #f5f5f5;
padding: 15px 0px;
border-radius: 10px 10px 0 0;
font-size: 30px;
}
.loginfooter {
padding: 15px 40px;
background-color: #f5f5f5;
border-radius: 0px 0px 10px 10px;
font-size: 18px;
text-align: center;
}
.loginheader, .loginfooter {
background-color: #f5f5f5;
border: 1px solid #ededed;
}
a {
text-decoration: none;
color: #000;
}
input[type=text], input[type=password] {
padding: 0 10px;
width: 320px;
height: 38px;
font-size: 16px;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
}
label {
/* float: rihgt; */
width: 100px;
line-height: 40px;
padding-left: 10px;
font-size: 18px;
text-align: left;
display: inline-block;
margin: 10px 0px;
}
.edit-examinee label{
/* float: rihgt; */
width: 130px;
line-height: 40px;
padding-left: 10px;
font-size: 18px;
text-align: left;
display: inline-block;
margin: 10px 0px;
}
.loginform label {
/* float: rihgt; */
width: 100px;
line-height: 40px;
padding-left: 10px;
font-size: 18px;
text-align: left;
display: inline-block;
margin: 10px 0px;
}
.button {
display: inline-block;
zoom: 1;
padding: 12px 30px;
margin: 0;
cursor: pointer;
border: 1px solid #bbb;
overflow: visible;
font: bold 16px arial, helvetica, sans-serif;
text-decoration: none;
white-space: nowrap;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
.admin-login-button {
margin-left: 350px;
color: #333;
background-color: #fff;
border-color: #ccc;
}
.admin-login-button:hover {
color: #333;
background-color: #e6e6e6;
border-color: #adadad;
}
.admin-login-button:active {
color: #333;
background-color: #e6e6e6;
border-color: #adadad;
position: relative;
top: 2px;
text-shadow: none;
box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
}
#media screen and (max-width: 540px) {
input[type=text], input[type=password] {
width: 90%;
}
}
Seems to work in both Safari and Firefox.
I just want to ask if its possible that the text in select is in italic then once the user chose an option, the text will change to normal? What I've done is when the uses is in select, the text is in normal style but once it focus out, the text change in to italic style. What I want is italic first then when the users chose, the text will change to normal. Here's the link to my work. help. Thanks in advance.
http://jsfiddle.net/franscla/xcd0smxj/
`HTML
<div class='select'><select >
<option>- Select subject -</option>
<option >Purchase</option>
<option style='height:50px;'>Be Our Partner</option>
<option>Technical Problems</option>
<option>Others</option>
</select></div>
CSS
.select {
margin-top:10px;
background: none repeat scroll 0 0 #fff;
border: 1px solid #455d74;
box-sizing: border-box;
display: inline-block;
height: 40px;
position: relative;
vertical-align: top;
width: 400px;
font-family:Arial;
}
.select > select {
background: none repeat scroll 0 0 #fff;
border: 0 none;
color: #7b7b7b;
display: block;
font-size:14px;
height: 35px;
line-height: 17px;
margin: 0;
padding: 9px 6px 5px 9px;
width: 100%;
font-style:italic;
}
.select > select:focus {
-moz-outline-radius: 2px;
color: #000;
outline: 0px solid #3fb6f2;
outline-offset: 0;
font-style:normal;
}
.select:before, .select:after {
content: "";
pointer-events: none;
position: absolute;
}
.select:before {
background: inherit;
bottom: 0;
right: 0;
top: 0;
width: 29px;
}
.select:after {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: transparent transparent;
background: url(http://www.8bitsports.net/wp-content/themes/morning/functions/wpzoom/assets/images/jquery.selectBox-arrow.gif) no-repeat 100% 100%;
border-right: 5px solid transparent;
border-style: solid;
border-width: 5px;
height: 15px;
right: 6px;
top: 6px;
width: 10px;
}
`
I have tried this is what you want:
$(".select").focusout(function() {
$('select').addClass('newclass');
});
.newclass {
font-style: normal !important;
color: black !important;
}
.select {
margin-top: 10px;
background: none repeat scroll 0 0 #fff;
border: 1px solid #455d74;
box-sizing: border-box;
display: inline-block;
height: 40px;
position: relative;
vertical-align: top;
width: 400px;
font-family: Arial;
}
.select > select {
background: none repeat scroll 0 0 #fff;
border: 0 none;
color: #7b7b7b;
display: block;
font-size: 14px;
height: 35px;
line-height: 17px;
margin: 0;
padding: 9px 6px 5px 9px;
width: 100%;
font-style: italic;
}
.select > select:focus {
-moz-outline-radius: 2px;
color: #000;
outline: 0px solid #3fb6f2;
outline-offset: 0;
font-style: normal;
}
.select:before,
.select:after {
content: "";
pointer-events: none;
position: absolute;
}
.select:before {
background: inherit;
bottom: 0;
right: 0;
top: 0;
width: 29px;
}
.select:after {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: transparent transparent;
background: url(http://www.8bitsports.net/wp-content/themes/morning/functions/wpzoom/assets/images/jquery.selectBox-arrow.gif) no-repeat 100% 100%;
border-right: 5px solid transparent;
border-style: solid;
border-width: 5px;
height: 15px;
right: 6px;
top: 6px;
width: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class='select'>
<select>
<option>- Select subject -</option>
<option>Purchase</option>
<option style='height:50px;'>Be Our Partner</option>
<option>Technical Problems</option>
<option>Others</option>
</select>
</div>
I don't know how to put this question but here's what I wanna do. I have made a login form. I want the bottom of my login form to look something like this
So far I have this:
My css:
/***** Login *******/
fieldset {
border: none;
margin: 0;
}
input {
border: none;
font-family: inherit;
font-size: inherit;
margin: 0;
-webkit-appearance: none;
}
input:focus {
outline: none;
}
input[type="submit"] { cursor: pointer; }
/* ---------- LOGIN-FORM ---------- */
#login-form {
margin: 10px;
width: 300px;
border: 1px solid #ea6e10;
vertical-align: middle;
}
#login-form h3 {
background-color:#ea6e10;
color: #fff;
font-size: 14px;
margin-top: 0;
padding: 20px;
text-align: right;
}
#login-form fieldset {
background: #fff;
border: 1px #ea6e10;
padding: 20px;
position: relative;
}
#login-form input {
font-size: 14px;
}
#login-form input[type="username"],
#login-form input[type="password"] {
background: #dcdcdc;
padding: 12px 10px;
width: 238px;
margin-top: 5px;
}
#login-form input[type="username"] {
}
#login-form input[type="password"] {
border-radius: 0px 0px 3px 3px;
}
#login-form input[type="submit"] {
background: #ea6e10;
text-align: center;
color: #fff;
float: left;
font-weight: bold;
margin-top: 5px;
padding: 12px 20px;
width: 100%;
}
#login-form input[type="submit"]:hover {
background: #ea6e10;
}
/***** Login *******/
fieldset {
border: none;
margin: 0;
}
input {
border: none;
font-family: inherit;
font-size: inherit;
margin: 0;
-webkit-appearance: none;
}
input:focus {
outline: none;
}
input[type="submit"] { cursor: pointer; }
/* ---------- LOGIN-FORM ---------- */
#login-form {
margin: 10px;
width: 300px;
border: 1px solid #ea6e10;
vertical-align: middle;
}
#login-form h3 {
background-color:#ea6e10;
color: #fff;
font-size: 14px;
margin-top: 0;
padding: 20px;
text-align: right;
}
#login-form fieldset {
background: #fff;
border: 1px #ea6e10;
padding: 20px;
position: relative;
}
#login-form input {
font-size: 14px;
}
#login-form input[type="username"],
#login-form input[type="password"] {
background: #dcdcdc;
padding: 12px 10px;
width: 238px;
margin-top: 5px;
}
#login-form input[type="username"] {
}
#login-form input[type="password"] {
border-radius: 0px 0px 3px 3px;
}
#login-form input[type="submit"] {
background: #ea6e10;
text-align: center;
color: #fff;
float: left;
font-weight: bold;
margin-top: 5px;
padding: 12px 20px;
width: 100%;
}
#login-form input[type="submit"]:hover {
background: #ea6e10;
}
<div id="login-form" style="float:left;">
<h3>Login</h3>
<fieldset>
<input type="username" required value="username" onBlur="if(this.value=='')this.value='username'" onFocus="if(this.value=='username')this.value='' "> <!-- JS because of IE support; better: placeholder="username" -->
<input type="password" required value="Password" onBlur="if(this.value=='')this.value='Password'" onFocus="if(this.value=='Password')this.value='' "> <!-- JS because of IE support; better: placeholder="Password" -->
<p>Forgot Password?</p>
<input type="submit" value="Login">
</form>
</fieldset>
</div>
Change your CSS like this:
/***** Login *******/
fieldset {
border: none;
margin: 0;
}
input {
border: none;
font-family: inherit;
font-size: inherit;
margin: 0;
-webkit-appearance: none;
}
input:focus {
outline: none;
}
input[type="submit"] {
cursor: pointer;
}
/* ---------- LOGIN-FORM ---------- */
#login-form {
margin: 10px;
width: 300px;
vertical-align: middle;
position: relative;
background: #f9f9f9;
border: 1px solid #ea6e10;
}
#login-form:after, #login-form:before {
top: 100%;
left: 50%;
border: solid transparent;
content:" ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
#login-form:after {
border-color: rgba(249, 249, 249, 0);
border-top-color: #f9f9f9;
border-width: 15px;
margin-left: -15px;
}
#login-form:before {
border-color: rgba(255, 102, 0, 0);
border-top-color: #ea6e10;
border-width: 16px;
margin-left: -16px;
}
#login-form h3 {
background-color:#ea6e10;
color: #fff;
font-size: 14px;
margin-top: 0;
padding: 20px;
text-align: right;
}
#login-form fieldset {
background: #fff;
border: 1px #ea6e10;
padding: 20px;
position: relative;
}
#login-form input {
font-size: 14px;
}
#login-form input[type="username"], #login-form input[type="password"] {
background: #dcdcdc;
padding: 12px 10px;
width: 238px;
margin-top: 5px;
}
#login-form input[type="username"] {
}
#login-form input[type="password"] {
border-radius: 0px 0px 3px 3px;
}
#login-form input[type="submit"] {
background: #ea6e10;
text-align: center;
color: #fff;
float: left;
font-weight: bold;
margin-top: 5px;
padding: 12px 20px;
width: 100%;
}
#login-form input[type="submit"]:hover {
background: #ea6e10;
}
See forked CodePen
You can use this is a bubble generator:
.bubble {
position: relative;
width: 250px;
padding: 0px;
background: #FFFFFF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: #ea6e10 solid 2px;
}
.bubble:after {
content:'';
position: absolute;
border-style: solid;
border-width: 15px 15px 0;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
bottom: -15px;
left: 136px;
}
.bubble:before {
content:'';
position: absolute;
border-style: solid;
border-width: 16px 16px 0;
border-color: #ea6e10 transparent;
display: block;
width: 0;
z-index: 0;
bottom: -17px;
left: 135px;
}
And apply this class in your container element. In your case:
<div id="login-form" class="bubble" style="float:left;">
fiddle
Here's your change in an updated CodePen.
And here's what we did:
CSS
#login-form {
margin: 10px;
width: 300px;
border: 1px solid #ea6e10;
vertical-align: middle;
position: relative;
}
#login-form:after {
position: absolute;
content: ' ';
transform: rotate(45deg) translate(-50%, -5px);
height:30px;
width:30px;
top: 100%;
left: 50%;
background-color: white;
border-color: #ea6e10;
border-width: 1px;
border-style: solid;
border-top: none;
border-left: none;
pointer-events: none;
}
We allow the pseudo-element after to be appropriately positioned by setting the #login-form to position:relative. The important part of this is the #login-form:after part, though. We're creating a pseudo-element that exists outside the normal document object model to provide the stylistic element. We take this, define it as a 30px x 30px box, give it a white background and an orange border, and put it smack dab in the bottom middle of your parent element #login-form. Then, we use transforms to rotate it 45 degrees and scoot it up 5 pixels to meet the bottom border of your parent element.
This will not work in IE 9 and below
We need to do some clever things with borders for IE 9 and under. Here's the change for that scenario:
CSS
#login-form {
position: relative;
}
#login-form:before, #login-form:after {
position: absolute;
top: 100%;
left: 50%;
content: ' ';
}
#login-form:before {
border-top: solid 15px white;
border-left: solid 15px transparent;
border-right: solid 15px transparent;
margin-left: -15px;
}
#login-form:after {
border-top: solid 17px #ea6e10;
border-left: solid 17px transparent;
border-right: solid 17px transparent;
margin-left: -17px;
}
i'm displaying menu hover on image .These all image generated dynamically.
while mouse hover on first image menu will display but problem on menu items background items displaying. how to hide behide elemets while displying hover ?
a {
text-decoration: none;
}
.menu {
font-family: Arial;
color: #515151;
height: 40px;
position: relative;
text-align: left;
width: 15px;
margin: 0 auto;
}
.menu li a {
color: #515151;
display: block;
cursor: pointer;
font-size: 14px;
padding: 6px 15px;
}
.menu li a:hover {
background: #f44141;
color: #fff;
}
.sub {
background: #fff;
position: absolute;
z-index: 2;
width: 200px;
border-radius: 3px;
box-shadow: 0 2px 4px #ddd;
border: 1px solid #ddd;
display: none;
padding: 40px 0 3px;
}
a.hover-link {
width: 190px;
background: #fff;
font-size: 14px;
color: #515151;
position: absolute;
z-index: 110;
display: block;
height: 8px;
cursor: pointer;
border-radius: 5px 5px 0 0;
font-weight: 700;
border: 1px solid #ddd;
padding: 10px 0 1px 10px;
}
.sub-options {
list-style: none;
font-size: 11px;
margin: 0;
padding: 0;
}
Working example : This is just z-index's issue CSS:
.sub{
background: #fff;
position: absolute;
z-index: 1000;
width: 200px;
margin: 0px 0 3px;
border-radius: 3px;
box-shadow: 0 2px 4px #ddd;
border: 1px solid #ddd;
display: none; top:38px; left:0;
}