I would like copy a custom select box from here --> https://codepen.io/microfront/pen/NXGrGQ into my website,
but it's not work when I paste the whole code.
I can't figure out how. I tried to copy all the html, css and java but doesn't work, then I even tried to convert scss to css still not working
I have this result from any navigator screenshot
body {
margin: 0;
font-family: 'Playfair Display', serif;
padding: 0 15px;
}
h1 {
font-size: 50px;
line-height: 54px;
text-align: center;
margin: 100px auto 60px;
max-width: 600px;
}
/*Chosen style*/
.chosen-wrapper {
margin: 0 auto 25px;
max-width: 400px;
position: relative;
}
.chosen-wrapper:after {
pointer-events: none;
content: "";
position: absolute;
top: 32px;
right: 20px;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 8px solid rgba(0, 0, 0, 0.5);
transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
z-index: 9;
}
.chosen-wrapper.is-active:after {
border-top: 8px solid black;
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.chosen-wrapper .chosen-container .chosen-single {
border-radius: 0;
height: 70px;
border: solid 2px #d9d9d9;
background: #fff;
font-size: 22px;
color: rgba(0, 0, 0, 0.5);
padding: 0 30px;
line-height: 66px;
transition: all 0.3s ease;
box-shadow: none;
background: #fff;
}
.chosen-wrapper .chosen-container .chosen-single b {
display: none !important;
}
.chosen-wrapper .chosen-container .chosen-single span {
letter-spacing: 0;
padding: 0;
line-height: inherit;
}
.chosen-wrapper .chosen-container.chosen-with-drop .chosen-single {
border-width: 2px 2px 1px;
border-color: #000 #000 #d9d9d9;
color: #000;
background-image: none;
}
.chosen-wrapper .chosen-container.chosen-with-drop .chosen-drop {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.chosen-wrapper .chosen-container.chosen-container-single-nosearch .chosen-search {
display: none;
}
.chosen-wrapper .chosen-container .chosen-drop {
letter-spacing: 0;
border-radius: 0;
box-shadow: none;
border-width: 0 2px 2px;
border-color: #000;
margin-top: 0;
-webkit-transition: all 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53);
-o-transition: all 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53);
transition: all 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53);
opacity: 0;
}
.chosen-wrapper .chosen-container .chosen-results {
font-size: 22px;
color: #000;
max-height: 245px;
margin: 0;
padding: 0;
}
.chosen-wrapper .chosen-container .chosen-results li {
padding: 16px 30px 18px;
margin: 0;
border-bottom: 1px solid #e5e5e5;
-webkit-transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
-o-transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
line-height: 20px;
}
.chosen-wrapper .chosen-container .chosen-results li.highlighted {
background-color: #eeeeee !important;
color: #000;
background-image: none;
}
.chosen-wrapper--style2:after {
right: 0;
}
.chosen-wrapper--style2:before {
content: '';
width: 0;
border-top: 2px solid #000;
position: absolute;
left: 0;
bottom: 0;
z-index: 1;
transition: all 0.2s cubic-bezier(0.06, 1, 0.89, 0.85);
}
.chosen-wrapper--style2.is-active:before {
width: 100%;
}
.chosen-wrapper--style2 .chosen-container .chosen-single {
border-width: 0 0 2px;
padding: 0;
}
.chosen-wrapper--style2 .chosen-container.chosen-with-drop .chosen-single {
border-width: 0 0 2px;
}
.chosen-wrapper--style2 .chosen-container.chosen-with-drop .chosen-drop {
opacity: 1;
visibility: visible;
transform: translateY(5px);
}
.chosen-wrapper--style2 .chosen-container .chosen-drop {
border-color: #d9d9d9;
border-top: 2px solid #d9d9d9;
}
.chosen-wrapper--style2 .chosen-container .chosen-results li {
padding: 16px 15px 18px;
}
/*ScrollBox style*/
.nicescroll-rails {
border-left: 1px solid #d9d9d9;
transform: translate(-2px);
top: 0 !important;
}
.nicescroll-rails .nicescroll-cursors {
width: 6px !important;
margin-right: 2px;
}
.link {
position: absolute;
left: 0;
bottom: 0;
padding: 20px;
}
.link a {
display: flex;
align-items: center;
text-decoration: none;
color: #000;
}
.link .fa {
font-size: 28px;
margin-right: 8px;
color: #000;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.2/chosen.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Responsive custom select box</h1>
<!--Style 2-->
<div class="chosen-wrapper chosen-wrapper--style2">
<select class="chosen-select" data-placeholder="Lorem ipsum dolor sit amet">
<option></option>
<option>Consectetur adipiscing</option>
<option>Sed do eiusmod tempor</option>
</select>
</div>
Related
Hi I have a button element that slide to the picture and I want the picture to be blurred when the button appeared however the button also blurring upon hovering I want only the image to be have that effect please help me! How can I do that? Excuse my english please. I am also a beginner. Thank you in advance.
.Aljon { /* This is an image */
width: 484px;
height: 612px;
position: absolute;
left: 65%;
bottom: 0;
background-size: contain;
background-repeat: no-repeat;
margin: 0;
padding: 0;
background-image: url(../Resources/Aljon.png);
animation: aljon-load 300ms ease 200ms;
transform: translateY(150%);
animation-fill-mode: forwards;
transition: 1s ease;
z-index: 2;
}
#keyframes aljon-load {
0% {
transform: translateY(150%);
}
100% {
transform: translateX(0);
}
}
#myBtn {
background-color: #ffffff;
border: none;
color: rgb(2, 2, 2);
padding: 10px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
font-family: Arial Rounded MT;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
left: 500px;
top: 400px;
position: relative;
transition: 0.3s ease-in-out;
z-index: 3;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.Aljon:hover #myBtn {
left: 200px;
transition: 0.3s ease-in-out;
}
.Aljon:hover {
filter: blur(8px);
}
.container:hover .Aljon {
opacity: 1;
transition: 0.3s ease-in-out;
cursor: pointer;
}
<div class="container">
<div class="Aljon">
<div class="overlay">
<button id="myBtn" class="button">HIRE ME</button>
</div>
</div>
</div>
You have to put blur 0px on other classes:
.Aljon { /* This is an image */
width: 484px;
height: 612px;
position: absolute;
left: 65%;
bottom: 0;
background-size: contain;
background-repeat: no-repeat;
margin: 0;
padding: 0;
background-image: url(../Resources/Aljon.png);
animation: aljon-load 300ms ease 200ms;
transform: translateY(150%);
animation-fill-mode: forwards;
transition: 1s ease;
z-index: 2;
}
#keyframes aljon-load {
0% {
transform: translateY(150%);
}
100% {
transform: translateX(0);
}
}
#myBtn {
background-color: #ffffff;
border: none;
color: rgb(2, 2, 2);
padding: 10px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
font-family: Arial Rounded MT;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
left: 500px;
top: 400px;
position: relative;
transition: 0.3s ease-in-out;
z-index: 3;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.Aljon:hover #myBtn {
left: 200px;
transition: 0.3s ease-in-out;
filter: blur(0px);
}
.Aljon:hover {
filter: blur(8px);
}
.container:hover .Aljon {
opacity: 1;
transition: 0.3s ease-in-out;
cursor: pointer;
filter: blur(0px);
}
<div class="container">
<div class="Aljon">
<div class="overlay">
<button id="myBtn" class="button">HIRE ME</button>
</div>
</div>
</div>
Thank you everyone. Here's how I fixed my code I let my button out inside the div of the image and manually add or style them on css.
.Aljon {
width: 484px;
height: 612px;
position: absolute;
left: 65%;
bottom: 0;
background-size: contain;
background-repeat: no-repeat;
margin: 0;
padding: 0;
background-image: url(../Resources/Aljon.png);
animation: aljon-load 300ms ease 200ms;
transform: translateY(150%);
animation-fill-mode: forwards;
transition: 1s ease;
z-index: 4;
}
#keyframes aljon-load {
0% {
transform: translateY(150%);
}
100% {
transform: translateX(0);
}
}
#myBtn {
background-color: #ffffff;
border: none;
color: rgb(2, 2, 2);
padding: 10px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
font-family: Arial Rounded MT;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
left: 1500px;
top: 400px;
position: relative;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
z-index: 4;
transition: 0.3s ease;
}
.Aljon:hover ~ #myBtn {
left: 1010px;
transition: 0.3s ease;
}
#myBtn:hover {
left: 1010px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.container:hover .Aljon {
filter: blur(2px);
}
<div class="container">
<div class="Aljon">
</div>
<button id="myBtn" class="button">HIRE ME</button>
</div>
I have a modal created with the following CSS. But when I open it up, it appears and allows me to fill out the form fields but clicking on the buttons (they have onclick events) does absolutely nothing - I tried making the buttons simple links which open new pages, but they don't do tat either. I am doing this within a SquareSpace page. I hope that doesn't complicate things.
<style>
.info-modal {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: visible;
transform: scale(1.1);
transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}
.info-modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 1rem 1.5rem;
width: 400px;
border-radius: 0.5rem;
}
.info-continue-button {
background-color: #0069d9;
border-color: #0062cc;
position: relative;
width: 100px;
font-family: "Oxygen", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
}
.info-continue-button:hover {
color: #fff;
}
.info-show-modal {
opacity: 1;
visibility: visible;
transform: scale(1.0);
transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}
.info-field {
color: inherit;
font: inherit;
margin: 0;
line-height: normal;
margin-bottom: 15px;
background-color: #fff;
border-radius: 0;
-webkit-appearance: none;
box-shadow: none;
box-sizing: border-box;
transition: all 0.3s ease-in-out;
width: 100%;
max-width: 400px;
height: 32px;
border: 0;
border-bottom: 2px solid #d1d1d1;
padding: 8px 0;
border-bottom-color: #2d56bb;
}
.info-modal button {
font: inherit;
margin: 0;
overflow: visible;
-webkit-appearance: button;
font-family: "Adamina", Georgia, serif;
display: inline-block;
height: 40px;
text-align: center;
font-size: 12px;
line-height: 38px;
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
box-sizing: border-box;
transition: all 0.3s ease-in-out;
margin-bottom: 10px;
color:#000;
outline: 0;
padding: 0 30px !important;
background-color: #e0e0e0;
border: 0;
font-weight: 700;
}
.info-modal button:hover {
color: #01855e;
}
.info-modal button[type='submit'].-disabled {
pointer-events: none;
cursor: not-allowed;
opacity: 0.4;
}
.info-modal p {
margin-bottom:0px;
}
</style>
EDIT
Solved it. See post below.
/ END OF EDIT
EDIT
NOT related to the suggested topic above and not solved by changing to vh as measurement of top-value instead as shown in this fiddle (as suggested by the first comments here): http://jsfiddle.net/wm02ovx8/3/. The div still doesn't animate in, but rather pops up in the blink of an eye.
/ END OF EDIT
I'm trying to animate a drawer div from top and into view. The animation works fine as long as it's in view to begin with (the "top" css property value being more than -1), but since I have a negative value that is calc(-100% + 30px) on the top property it just "pops up" instead. What am I missing here?
[Fiddle] (To open the menu, press the index word on the right)
HTML:
<div id="closeIndexLayer"></div>
<div id="alignLinks">
<div id="anchorLinks"></div>
</div>
<div id="indexMenu">Index</div>
CSS:
div#alignLinks {
position: fixed;
display: flex;
align-items: baseline;
justify-content: flex-start;
flex-flow: wrap;
left: 30px;
top: calc(-100% + 30px);
background: rgba(255,0,0,.60);
/* transform: translateX(-50%); */
height: calc(100% - 30px);
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
z-index: 250 !important;
min-width: 425px;
max-width: 425px;
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
div#anchorLinks {
display: flex;
/* position: fixed; */
flex-flow: wrap;
height: auto;
/* position: absolute; */
/* background: rgba(0,0,0,.5); */
top: 0px;
right: 0px;
z-index: 250;
}
div#closeIndexLayer {
position: fixed;
display:none;
top: 0;
left: 0;
box-sizing: border-box;
width: 100%;
height: 100%;
background: green;
z-index: 250;
}
a.anchorLink {
width: auto;
background: hsla(210, 11%, 8%, 1);
border-radius: 3px;
text-decoration: none;
font-size: 2rem;
margin-top: 16px;
margin-bottom: 2px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-webkit-transition: all 140ms ease-in-out;
-moz-transition: all 140ms ease-in-out;
-ms-transition: all 140ms ease-in-out;
-o-transition: all 140ms ease-in-out;
transition: all 140ms ease-in-out;
}
#indexMenu {
position: fixed;
display: block;
z-index: 249;
top: 50%;
height: 18px;
right: -18px;
padding: 0px 6px 0px 6px;
transform: translateY(-50%) rotate(270deg);
background: rgba(255,255,255,.15);
border-radius: 5px 5px 0px 0px;
font-family: 'Nunito Sans', sans-serif;
font-size: 10px;
box-shadow: 0px 1px 2px rgba(255,255,255,.12), 0px 2px 3px rgba(255,255,255,.24);
cursor: pointer;
}
Javascript:
function showIndex() {
var elem = document.getElementById("alignLinks");
thestyle = window.getComputedStyle(elem),
thetop = thestyle.getPropertyValue('top');
var pos = 0;
var id = setInterval(frame, 5);
function frame() {
if (pos <= 0) {
pos++;
elem.style.top = pos + 'px';
} else {
clearInterval(id);
}
}
}
function hideIndex() {
var elem = document.getElementById("alignLinks");
thestyle = window.getComputedStyle(elem),
thetop = thestyle.getPropertyValue('top');
var pos = 0;
var id = setInterval(frame, 5);
function frame() {
if (pos >= 0) {
pos--;
elem.style.top = pos + 'px';
} else {
clearInterval(id);
}
}
}
document.getElementById("indexMenu").addEventListener("click", function(){
var closeIndexLayer = document.getElementById("closeIndexLayer");
closeIndexLayer.style.display = "block";
showIndex();
});
document.getElementById("closeIndexLayer").addEventListener("click", function(){
var closeIndexLayer = document.getElementById("closeIndexLayer");
closeIndexLayer.style.display = "none";
hideIndex();
});
//</editor-fold>
I solved it another way instead, and in a way I'm more familiar with. The way I found that worked for me adds a class to the element and that class have animation properties. Then if you want to animate out, just add the animation properties to the element that is being animated (in this case the id #alignLinks).
[Fiddle]
Javascript:
let drawer = document.getElementById("alignLinks");
document.getElementById('indexMenu').onclick = function() {
if(this.innerHTML === 'Index')
{
this.innerHTML = 'Close';
drawer.classList.add('topAnimDown');
} else {
this.innerHTML = 'Index';
var computedStyle = window.getComputedStyle(drawer),
topProp = computedStyle.getPropertyValue('top');
drawer.style.topProp = topProp;
drawer.classList.remove('topAnimDown');
}
}
HTML
<div id="closeIndexLayer"></div>
<div id="alignLinks">
<div id="anchorLinks"></div>
</div>
<div id="indexMenu">Index</div>
CSS
body {
background: hotpink;
}
div#alignLinks {
position: fixed;
display: flex;
align-items: baseline;
justify-content: flex-start;
flex-flow: wrap;
left: 30px;
top: calc(-100% + 30px);
background: rgba(255,0,0,.60);
/* transform: translateX(-50%); */
height: calc(100% - 30px);
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
z-index: 250 !important;
min-width: 425px;
max-width: 425px;
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
-webkit-transition: 3s ease-in-out;
-moz-transition: 3s ease-in-out;
-ms-transition: 3s ease-in-out;
-o-transition: 3s ease-in-out;
transition: 3s ease-in-out;
}
.topAnimDown {
-webkit-transition: 3s ease-in-out;
-moz-transition: 3s ease-in-out;
-ms-transition: 3s ease-in-out;
-o-transition: 3s ease-in-out;
transition: 3s ease-in-out;
top: 0 !important;
}
div#anchorLinks {
display: flex;
/* position: fixed; */
flex-flow: wrap;
height: auto;
/* position: absolute; */
/* background: rgba(0,0,0,.5); */
top: 0px;
right: 0px;
z-index: 250;
}
div#closeIndexLayer {
position: fixed;
display:none;
top: 0;
left: 0;
box-sizing: border-box;
width: 100%;
height: 100%;
background: green;
z-index: 250;
}
a.anchorLink {
width: auto;
background: hsla(210, 11%, 8%, 1);
border-radius: 3px;
text-decoration: none;
font-size: 2rem;
margin-top: 16px;
margin-bottom: 2px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-webkit-transition: all 140ms ease-in-out;
-moz-transition: all 140ms ease-in-out;
-ms-transition: all 140ms ease-in-out;
-o-transition: all 140ms ease-in-out;
transition: all 140ms ease-in-out;
}
#indexMenu {
position: fixed;
display: block;
z-index: 249;
top: 50%;
height: 18px;
right: -18px;
padding: 0px 6px 0px 6px;
transform: translateY(-50%) rotate(270deg);
background: rgba(255,255,255,.15);
border-radius: 5px 5px 0px 0px;
font-family: 'Nunito Sans', sans-serif;
font-size: 24px;
box-shadow: 0px 1px 2px rgba(255,255,255,.12), 0px 2px 3px rgba(255,255,255,.24);
cursor: pointer;
}
I’ve upgraded the ‘Font Awesome’ font to version 5, and then the icons in my application disappeared. I also still have the old js for backwards compatability but my checkbox doesn't have an icon anymore.
I don't know what exactly has changed in this upgrade to be honest.
Can anyone help me?
WORKING FIDDLE
.checkbox {
padding-left: 20px;
}
.checkbox label {
display: inline-block;
position: relative;
padding-left: 5px;
}
.checkbox label::before {
content: "";
display: inline-block;
position: absolute;
width: 17px;
height: 17px;
left: 0;
margin-left: -20px;
border: 1px solid #cccccc;
border-radius: 3px;
background-color: #fff;
-webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
-o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
}
.checkbox label::after {
display: inline-block;
position: absolute;
width: 16px;
height: 16px;
left: 0;
top: 0;
margin-left: -20px;
padding-left: 3px;
padding-top: 1px;
font-size: 11px;
color: #555555;
}
.checkbox input[type="checkbox"] {
opacity: 0;
}
.checkbox input[type="checkbox"]:focus+label::before {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.checkbox input[type="checkbox"]:checked+label::after {
font-family: 'FontAwesome';
content: "\f00c";
}
.checkbox.error-checkbox input[type="checkbox"]:checked+label::after {
content: "\f00d";
}
.checkbox input[type="checkbox"]:disabled+label {
opacity: 0.65;
}
.checkbox input[type="checkbox"]:disabled+label::before {
background-color: #eeeeee;
cursor: not-allowed;
}
.checkbox.checkbox-circle label::before {
border-radius: 50%;
}
.checkbox.checkbox-inline {
margin-top: 0;
}
.checkbox-primary input[type="checkbox"]:checked+label::before {
background-color: #062f4f;
border-color: #062f4f;
}
.checkbox-primary input[type="checkbox"]:checked+label::after {
color: #fff;
}
.checkbox-danger input[type="checkbox"]:checked+label::before {
background-color: #d9534f;
border-color: #d9534f;
}
.checkbox-danger input[type="checkbox"]:checked+label::after {
color: #fff;
}
.checkbox-info input[type="checkbox"]:checked+label::before {
background-color: #5bc0de;
border-color: #5bc0de;
}
.checkbox-info input[type="checkbox"]:checked+label::after {
color: #fff;
}
.checkbox-warning input[type="checkbox"]:checked+label::before {
background-color: #f0ad4e;
border-color: #f0ad4e;
}
.checkbox-warning input[type="checkbox"]:checked+label::after {
color: #fff;
}
.checkbox-success input[type="checkbox"]:checked+label::before {
background-color: #5cb85c;
border-color: #5cb85c;
}
.checkbox-success input[type="checkbox"]:checked+label::after {
color: #fff;
}
.radio {
padding-left: 20px;
}
.radio label {
display: inline-block;
position: relative;
padding-left: 5px;
}
.radio label::before {
content: "";
display: inline-block;
position: absolute;
width: 17px;
height: 17px;
left: 0;
margin-left: -20px;
border: 1px solid #cccccc;
border-radius: 50%;
background-color: #fff;
-webkit-transition: border 0.15s ease-in-out;
-o-transition: border 0.15s ease-in-out;
transition: border 0.15s ease-in-out;
}
.radio label::after {
display: inline-block;
position: absolute;
content: " ";
width: 11px;
height: 11px;
left: 3px;
top: 3px;
margin-left: -20px;
border-radius: 50%;
background-color: #555555;
-webkit-transform: scale(0, 0);
-ms-transform: scale(0, 0);
-o-transform: scale(0, 0);
transform: scale(0, 0);
-webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
-moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
-o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
}
.radio input[type="radio"] {
opacity: 0;
}
.radio input[type="radio"]:focus+label::before {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.radio input[type="radio"]:checked+label::after {
-webkit-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-o-transform: scale(1, 1);
transform: scale(1, 1);
}
.radio input[type="radio"]:disabled+label {
opacity: 0.65;
}
.radio input[type="radio"]:disabled+label::before {
cursor: not-allowed;
}
.radio.radio-inline {
margin-top: 0;
}
.radio-primary input[type="radio"]+label::after {
background-color: #092756;
}
.radio-primary input[type="radio"]:checked+label::before {
border-color: #092756;
}
.radio-primary input[type="radio"]:checked+label::after {
background-color: #092756;
}
.radio-danger input[type="radio"]+label::after {
background-color: #d9534f;
}
.radio-danger input[type="radio"]:checked+label::before {
border-color: #d9534f;
}
.radio-danger input[type="radio"]:checked+label::after {
background-color: #d9534f;
}
.radio-info input[type="radio"]+label::after {
background-color: #092756;
}
.radio-info input[type="radio"]:checked+label::before {
border-color: #092756;
}
.radio-info input[type="radio"]:checked+label::after {
background-color: #092756;
}
.radio-warning input[type="radio"]+label::after {
background-color: #f0ad4e;
}
.radio-warning input[type="radio"]:checked+label::before {
border-color: #f0ad4e;
}
.radio-warning input[type="radio"]:checked+label::after {
background-color: #f0ad4e;
}
.radio-success input[type="radio"]+label::after {
background-color: #5cb85c;
}
.radio-success input[type="radio"]:checked+label::before {
border-color: #5cb85c;
}
.radio-success input[type="radio"]:checked+label::after {
background-color: #5cb85c;
}
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<div class="checkbox checkbox-primary">
<input type="checkbox" id="coreBanking" name="hasHost" checked="" disabled="">
<label for="coreBanking">Core banking</label>
</div>
There are a number of things that need changing here.
You're loading the JS file, but you'd be better with the CSS link if you're including the icons in pseudo elements.
The name of the font has changed from 'FontAwesome' to Font Awesome\ 5 Free and you need to add font-weight: 900 for the icon to appear too.
Here's a working example:
.checkbox {
padding-left: 20px;
}
.checkbox label {
display: inline-block;
position: relative;
padding-left: 5px;
}
.checkbox label::before {
content: "";
display: inline-block;
position: absolute;
width: 17px;
height: 17px;
left: 0;
margin-left: -20px;
border: 1px solid #cccccc;
border-radius: 3px;
background-color: #fff;
-webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
-o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
}
.checkbox label::after {
display: inline-block;
position: absolute;
width: 16px;
height: 16px;
left: 0;
top: 0;
margin-left: -20px;
padding-left: 4px;
padding-top: 4px;
font-size: 11px;
color: #555555;
}
.checkbox input[type="checkbox"] {
opacity: 0;
}
.checkbox input[type="checkbox"]:focus+label::before {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.checkbox input[type="checkbox"]:checked+label::after {
font-family: Font Awesome\ 5 Free;
content: "\f00c";
font-weight: 900;
}
.checkbox.error-checkbox input[type="checkbox"]:checked+label::after {
content: "\f00d";
font-weight: 900;
}
.checkbox input[type="checkbox"]:disabled+label {
opacity: 0.65;
}
.checkbox input[type="checkbox"]:disabled+label::before {
background-color: #eeeeee;
cursor: not-allowed;
}
.checkbox.checkbox-circle label::before {
border-radius: 50%;
}
.checkbox.checkbox-inline {
margin-top: 0;
}
.checkbox-primary input[type="checkbox"]:checked+label::before {
background-color: #062f4f;
border-color: #062f4f;
}
.checkbox-primary input[type="checkbox"]:checked+label::after {
color: #fff;
}
.checkbox-danger input[type="checkbox"]:checked+label::before {
background-color: #d9534f;
border-color: #d9534f;
}
.checkbox-danger input[type="checkbox"]:checked+label::after {
color: #fff;
}
.checkbox-info input[type="checkbox"]:checked+label::before {
background-color: #5bc0de;
border-color: #5bc0de;
}
.checkbox-info input[type="checkbox"]:checked+label::after {
color: #fff;
}
.checkbox-warning input[type="checkbox"]:checked+label::before {
background-color: #f0ad4e;
border-color: #f0ad4e;
}
.checkbox-warning input[type="checkbox"]:checked+label::after {
color: #fff;
}
.checkbox-success input[type="checkbox"]:checked+label::before {
background-color: #5cb85c;
border-color: #5cb85c;
}
.checkbox-success input[type="checkbox"]:checked+label::after {
color: #fff;
}
.radio {
padding-left: 20px;
}
.radio label {
display: inline-block;
position: relative;
padding-left: 5px;
}
.radio label::before {
content: "";
display: inline-block;
position: absolute;
width: 17px;
height: 17px;
left: 0;
margin-left: -20px;
border: 1px solid #cccccc;
border-radius: 50%;
background-color: #fff;
-webkit-transition: border 0.15s ease-in-out;
-o-transition: border 0.15s ease-in-out;
transition: border 0.15s ease-in-out;
}
.radio label::after {
display: inline-block;
position: absolute;
content: " ";
width: 11px;
height: 11px;
left: 3px;
top: 3px;
margin-left: -20px;
border-radius: 50%;
background-color: #555555;
-webkit-transform: scale(0, 0);
-ms-transform: scale(0, 0);
-o-transform: scale(0, 0);
transform: scale(0, 0);
-webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
-moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
-o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
}
.radio input[type="radio"] {
opacity: 0;
}
.radio input[type="radio"]:focus+label::before {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.radio input[type="radio"]:checked+label::after {
-webkit-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-o-transform: scale(1, 1);
transform: scale(1, 1);
}
.radio input[type="radio"]:disabled+label {
opacity: 0.65;
}
.radio input[type="radio"]:disabled+label::before {
cursor: not-allowed;
}
.radio.radio-inline {
margin-top: 0;
}
.radio-primary input[type="radio"]+label::after {
background-color: #092756;
}
.radio-primary input[type="radio"]:checked+label::before {
border-color: #092756;
}
.radio-primary input[type="radio"]:checked+label::after {
background-color: #092756;
}
.radio-danger input[type="radio"]+label::after {
background-color: #d9534f;
}
.radio-danger input[type="radio"]:checked+label::before {
border-color: #d9534f;
}
.radio-danger input[type="radio"]:checked+label::after {
background-color: #d9534f;
}
.radio-info input[type="radio"]+label::after {
background-color: #092756;
}
.radio-info input[type="radio"]:checked+label::before {
border-color: #092756;
}
.radio-info input[type="radio"]:checked+label::after {
background-color: #092756;
}
.radio-warning input[type="radio"]+label::after {
background-color: #f0ad4e;
}
.radio-warning input[type="radio"]:checked+label::before {
border-color: #f0ad4e;
}
.radio-warning input[type="radio"]:checked+label::after {
background-color: #f0ad4e;
}
.radio-success input[type="radio"]+label::after {
background-color: #5cb85c;
}
.radio-success input[type="radio"]:checked+label::before {
border-color: #5cb85c;
}
.radio-success input[type="radio"]:checked+label::after {
background-color: #5cb85c;
}
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<div class="checkbox checkbox-primary">
<input type="checkbox" id="coreBanking" name="hasHost" checked="" disabled="">
<label for="coreBanking">Core banking</label>
</div>
please help me to this code, how do i prevent the div resizing when i resizing the webpage.
any advice for this code sir/mam?
thanks in advance for the help.
sorry for my bad english :D
/** to prevent inputing numbers in textbox enter your mobile number */
function validate(evt) {
var theEvent = evt || window.event;
var key = theEvent.keyCode || theEvent.which;
key = String.fromCharCode( key );
var regex = /[0-9]|\./;
if( !regex.test(key) ) {
theEvent.returnValue = false;
if(theEvent.preventDefault) theEvent.preventDefault();
}
}/** to prevent inputing numbers in textbox enter your mobile number END */
/** For Checkbox */
jQuery(document).ready(function()
{
jQuery("#accept").click(function(){
if(jQuery("#button").is(":enabled"))
{
jQuery("#button").prop("disabled",true);
}
else
{
jQuery("#button").prop("disabled",false);
}
});});/** For Checkbox End*/
.plogo{
z-index:5;
position:absolute;
font-family: Georgia, serif;
line-height: 1em;
color: #ffffff;
font-weight:bold;
font-style:italic;
font-size: 72px;
text-shadow:0px 0px 0 rgb(56,56,56),1px 1px 0 rgb(56,56,56),2px 2px 0 rgb(56,56,56),3px 3px 0 rgb(56,56,56),4px 4px 0 rgb(56,56,56),5px 5px 0 rgb(56,56,56),6px 6px 0 rgb(56,56,56), 7px 7px 0 rgb(56,56,56),8px 8px 7px rgba(0,0,0,0.3),8px 8px 1px rgba(0,0,0,0.5),0px 0px 7px rgba(0,0,0,.2);
}
a {text-decoration: none;}
nav {
width: 100%;
height: 80px;
background: rgb(2,189,138);
position:absolute;
z-index:4;
}
ul li {
font: 13px Verdana, 'Lucida Grande';
cursor: pointer;
-webkit-transition: padding .05s linear;
-moz-transition: padding .05s linear;
-ms-transition: padding .05s linear;
-o-transition: padding .05s linear;
transition: padding .05s linear;
font-weight:bold;
}
ul li.drop {
position: relative;
}
ul > li {
display: inline-block;
}
ul li a {
color: #eee;
-webkit-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-ms-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
transition: all .1s ease-out;
}
ul li a:hover {
color: #eee;
}
.dropOut .triangle {
width: 0;
height: 0;
position: absolute;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid white;
top: -8px;
left: 50%;
margin-left: -8px;
}
.dropdownContain {
width: 160px;
position: absolute;
z-index: 2;
left: 50%;
margin-left: -80px; /* half of width */
top: -400px;
}
.dropOut {
width: 160px;
background: white;
float: left;
position: relative;
margin-top: 0px;
opacity: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 6px rgba(0,0,0,.15);
-moz-box-shadow: 0 1px 6px rgba(0,0,0,.15);
box-shadow: 0 1px 6px rgba(0,0,0,.15);
-webkit-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-ms-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
transition: all .1s ease-out;
}
.dropOut ul {
float: left;
padding: 10px 0;
}
.dropOut ul li {
text-align: left;
float: left;
width: 125px;
padding: 12px 0 10px 15px;
margin: 0px 10px;
color: #777;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-transition: background .1s ease-out;
-moz-transition: background .1s ease-out;
-ms-transition: background .1s ease-out;
-o-transition: background .1s ease-out;
transition: background .1s ease-out;
}
.dropOut ul li:hover {
background: #f6f6f6;
}
ul li:hover a { color: white; }
ul li:hover .dropdownContain { top: 65px; }
ul li:hover .underline { border-bottom-color: #777; }
ul li:hover .dropOut { opacity: 1; margin-top: 8px; }
.wrapper {
background: #50a3a2;
background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 100% auto;
margin-top: -250px;
overflow: visible;
}
.container {
max-width: 600px;
margin: 20px;
padding: 80px 0;
height: 100% auto;
}
.container h1 {
font-size: 40px;
-webkit-transition-duration: 1s;
transition-duration: 1s;
-webkit-transition-timing-function: ease-in-put;
transition-timing-function: ease-in-put;
font-weight: 200;
}
.bg-bubbles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.bg-bubbles li {
position: absolute;
list-style: none;
display: block;
width: 40px;
height: 40px;
background-color: rgba(255, 255, 255, 0.15);
bottom: -160px;
-webkit-animation: square 25s infinite;
animation: square 25s infinite;
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
}
.bg-bubbles li:nth-child(1) {
left: 10%;
}
.bg-bubbles li:nth-child(2) {
left: 20%;
width: 80px;
height: 80px;
-webkit-animation-delay: 2s;
animation-delay: 2s;
-webkit-animation-duration: 17s;
animation-duration: 17s;
}
.bg-bubbles li:nth-child(3) {
left: 25%;
-webkit-animation-delay: 4s;
animation-delay: 4s;
}
.bg-bubbles li:nth-child(4) {
left: 40%;
width: 60px;
height: 60px;
-webkit-animation-duration: 22s;
animation-duration: 22s;
background-color: rgba(255, 255, 255, 0.25);
}
.bg-bubbles li:nth-child(5) {
left: 70%;
}
.bg-bubbles li:nth-child(6) {
left: 80%;
width: 120px;
height: 120px;
-webkit-animation-delay: 3s;
animation-delay: 3s;
background-color: rgba(255, 255, 255, 0.2);
}
.bg-bubbles li:nth-child(7) {
left: 32%;
width: 160px;
height: 160px;
-webkit-animation-delay: 7s;
animation-delay: 7s;
}
.bg-bubbles li:nth-child(8) {
left: 55%;
width: 20px;
height: 20px;
-webkit-animation-delay: 15s;
animation-delay: 15s;
-webkit-animation-duration: 40s;
animation-duration: 40s;
}
.bg-bubbles li:nth-child(9) {
left: 25%;
width: 10px;
height: 10px;
-webkit-animation-delay: 2s;
animation-delay: 2s;
-webkit-animation-duration: 40s;
animation-duration: 40s;
background-color: rgba(255, 255, 255, 0.3);
}
.bg-bubbles li:nth-child(10) {
left: 90%;
width: 160px;
height: 160px;
-webkit-animation-delay: 11s;
animation-delay: 11s;
}
#-webkit-keyframes square {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-700px) rotate(600deg);
transform: translateY(-700px) rotate(600deg);
}
}
#keyframes square {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-700px) rotate(600deg);
transform: translateY(-700px) rotate(600deg);
}
}
.cacc{
z-index: 2;
position:relative;
height:10px;
width:280px;
}
input[type='text']{
font-size:18px;
font-family:modern, tahoma;
}
/*---------- For username --------------------------------*/
input[type='text'] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
border: 1px solid rgba(255, 255, 255, 0.4);
background-color: rgba(255, 255, 255, 0.2);
border-radius: 3px;
padding: 10px 15px;
display: block;
font-size: 18px;
color: #fff;
-webkit-transition-duration: 0.25s;
transition-duration: 0.25s;
font-weight: 300;
background-color: white;
color: #53e3a6;
}
/*---------- For username End--------------------------------*/
input[type='password'] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
border: 1px solid rgba(255, 255, 255, 0.4);
background-color: rgba(255, 255, 255, 0.2);
border-radius: 3px;
padding: 10px 15px;
display: block;
font-size: 18px;
color: #fff;
-webkit-transition-duration: 0.25s;
transition-duration: 0.25s;
font-weight: 300;
background-color: white;
color: #53e3a6;}
input[type='email'] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
border: 1px solid rgba(255, 255, 255, 0.4);
background-color: rgba(255, 255, 255, 0.2);
border-radius: 3px;
padding: 10px 15px;
display: block;
font-size: 18px;
color: #fff;
-webkit-transition-duration: 0.25s;
transition-duration: 0.25s;
font-weight: 300;
background-color: white;
color: #53e3a6;
}
.dlist{font-size: 18px; font-family:modern; color:grey; border-radius:5px; z-index:2; position:relative; }
.cbox{ position:relative; z-index:2;}
.logbutton {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
background-color: #fff;
border: 0;
padding: 10px 15px;
color: #53e3a6;
border-radius: 3px;
width: 250px;
cursor: pointer;
font-size: 18px;
position: relative;
z-index: 2;
-webkit-transition-duration: 0.25s;
transition-duration: 0.25s;
}
.logbutton:hover {
background-color: #f5f7f9;
}
</head>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jssor.slider.mini.js"></script>
<body style="background-color:#e8e8e8; margin:0px; padding:0px;">
<font class="plogo">  P . A . R . S</font>
<nav>
<ul>                                      
                                      
                         
<li>Home</li>    
<li>Log In</li>    
<li>Create Account</li>
<li class="drop">
Advertisement
<div class="dropdownContain">
<div class="dropOut">
<div class="triangle"></div>
<ul>
<li>Job Hiring</li>
<li>Tourist Spot</li>
<li>Restaurant & Bar</li>
<li>Foods</li>
<li>Party Events</li>
</ul>
</div>
</div>
</li>
<li>About Us</li>
</ul>
</nav>
<div class="wrapper">
<div class="container">
<center><h1 style="font-weight:bold;color:#fff;">CREATE ACCOUNT</h1>
<?php
?>
<form action=""><font style="color:#fff; font-weight:bold; font-size:18px;">
Choose your Username
<input type="text" class="cacc" placeholder="Create Username" />
Choose your Password
<input type="text" class="cacc" placeholder="Create Password" />
Your Email
<input type="email" class="cacc" placeholder="Enter your email" />
Your First Name
<input type="text" class="cacc" placeholder="First name" />
Your Last Name
<input type="text" class="cacc" placeholder="Last name" />
Your Mobie Number
<input type="text" onkeypress="validate(event)" class="cacc" placeholder="11 Digits Mobile Number" maxlength="11" />
Your Birthday<br />
<select class="dlist">
<option>Month</option>
<option>123</option>
</select>
<select class="dlist">
<option>Day</option>
</select>
<select class="dlist">
<option>Year</option>
</select><br />
Your Gender<br />
<select class="dlist">
<option>Gender</option>
<option>Male</option>
<option>Female</option>
</select><br />
<input type="checkbox" class="cbox" id="accept" required />
<br />
<input type="submit" value="Create Account" class="logbutton" disabled="disabled" id="button" />
</font></form>
</center></div>
</body>
please help me to this code, how do i prevent the div resizing when i resizing the webpage.
any advice for this code sir/mam?
thanks in advance for the help.
sorry for my bad english :D
Add min-width CSS property to the element you want to not be resized to lower than prefered width:
.YOUR_DIV_CLASS {
min-width: 500px; // Or any other width you prefer.
}
Or use width property and define width in px to make the div have static width.
changing each or some of those elements (depending on your needs)
... {
...
width: 100%;
...
}
into something like:
... {
...
width: 980px; (or whatever numeber you need)
...
}