I have customized my checkbox css. I have given an outline and a border to my checkbox. When i focus or click on the checkbox, the border and outline are not consistent with it. I tried giving the same border and outline to focus pseudo class, but it is not working.
Below is my HTML and CSS that i am using for the checkbox.
HTML:
<label class="form__field__input__label"><input class="form__field__input__checkbox" type="checkbox" name="World languages" value="">World languages</label>
CSS:
.form__field__input__label {
flex: 0 0 25%;
margin: 30px 0;
display: flex;
font-family: 'NotoSans';
font-size: 18px;
line-height: 26px;
color: #4e4f4f;
.form__field__input__checkbox {
width: 25px;
height: 24px;
margin-right: 15px;
position: relative;
border: solid 1px #4e4f4f;
outline: solid 0.5px $labelColor;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
&:checked::before {
content: "";
position: absolute;
width: 15px;
height: 14px;
top: 4px;
right: 4px;
background-color: #4e4f4f;
transition: all 0.3s linear;
}
&:checked:focus {
outline: solid 0.5px $labelColor;
}
}
}
I think this code could help you -
.form__field__input__label {
flex: 0 0 25%;
margin: 30px 0;
display: flex;
font-family: 'NotoSans';
font-size: 18px;
line-height: 26px;
color: #4e4f4f;
}
.form__field__input__checkbox {
width: 25px;
height: 24px;
margin-right: 15px;
position: relative;
border: solid 1px #4e4f4f;
outline: solid 0.5px $labelColor;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
}
.form__field__input__checkbox:checked::before {
content: "";
position: absolute;
width: 15px;
height: 14px;
top: 4px;
right: 4px;
background-color: #4e4f4f;
transition: all 0.3s linear;
}
.form__field__input__checkbox:checked:focus {
outline: solid 0.5px $labelColor;
}
<label class="form__field__input__label"><input class="form__field__input__checkbox" type="checkbox" name="World languages" value="">World languages</label>
Related
I have a customized button/link element that transforms the said element to look like this:
Problem I'm having is that when the button is focused using keyboard the outline is not transformed along the borders of the element. I've also tried using box-shadow, with same results. Is there a proper way to transform outline, like I did with the element itself?
.button {
font-family: $brand-font;
font-weight: 900;
transition: color $transition-duration ease-out;
-webkit-appearance: none;
-moz-appearance: none;
display: inline-block;
text-align: center;
max-width: 320px;
min-width: 200px;
height: 40px;
line-height: 40px;
position: relative;
border: none !important;
font-size: 1.4rem;
z-index: 0;
padding: 0 1.8rem;
background-color: transparent;
color: $primary-blue;
cursor: pointer;
&:visited {
border: none !important;
}
&.skewOnHover {
color: $secondary-blue;
}
& > svg {
vertical-align: middle;
}
&:focus {
outline: 2px solid $primary-blue;
// box-shadow: 0 0 0 2px $primary-blue;
}
&::before {
content: ""; display: block;
display: block;
width: 100%; height: 100%;
top: -2px; left: -2px;
transition-property: border, background-color, transform;
transition-duration: $transition-duration;
transition-timing-function: ease-out;
position: absolute;
z-index: -1;
// regular (cyan background, blue text)
background-color: $secondary-blue;
border: 2px solid $secondary-blue;
transform: skew(-22.5deg);
}
&.skewOnHover {
&::before {
background-color: transparent;
transform: skew(22.5deg);
}
}
Apply the outline to skewed element:
&:focus:before {
outline: 2px solid red;
}
and reset the outline of button:
.button:focus {
outline: none;
}
.button {
font-weight: 900;
transition: color 0.3s ease-out;
-webkit-appearance: none;
-moz-appearance: none;
display: inline-block;
text-align: center;
max-width: 320px;
min-width: 200px;
height: 40px;
line-height: 40px;
position: relative;
border: none !important;
font-size: 1.4rem;
z-index: 0;
padding: 0 1.8rem;
background-color: transparent;
color: blue;
cursor: pointer;
}
.button:visited {
border: none !important;
}
.button.skewOnHover {
color: dodgerblue;
}
.button>svg {
vertical-align: middle;
}
.button:focus {
outline: none;
}
.button:focus:before {
outline: 2px solid red;
}
.button::before {
content: "";
display: block;
display: block;
width: 100%;
height: 100%;
top: -2px;
left: -2px;
transition-property: border, background-color, transform;
transition-duration: 0.3s;
transition-timing-function: ease-out;
position: absolute;
z-index: -1;
background-color: dodgerblue;
border: 2px solid dodgerblue;
transform: skew(-22.5deg);
}
.button.skewOnHover::before {
background-color: transparent;
transform: skew(22.5deg);
}
<button class="button">button</button>
I currently have a slider with a hover, but is there a way to make the hover a circle that will appear as a circle in all browsers? Is there also a way to change the shape of the slider from a rectangle to a line? I have also tried to remove the random line that appears above the slider but can't seem to remove it, is there something obvious that I am missing?
Thank you!
#container {
padding: 300px 500px;
}
#frequencySlider {
margin-top: 1px;
width: 100%;
}
#frequencyLabel {
margin-top: 1px;
}
#toggleAudio {
padding: 10px 20px;
height: center;
width: center;
font-size: 15px;
background: #939393;
color: white;
opacity: 0.7;
}
/* Slider */
.slider {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 8px;
background: #908e8e;
opacity: 0.2;
-webkit-transition: .3s;
transition: opacity .3s;
}
.slider:hover {}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 12px;
height: 20px;
background: #0b38b4;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 12px;
height: 20px;
background: #0b38b4;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="container">
<button id="toggleAudio">
Click Here
</button>
<hr>
<input type="range" min="100" max="4000" value="2000" step="1" class="slider" id="frequencySlider">
<br>
<p id="frequencyLabel">Frequency: 2000 Hz</p>
</div>
</body>
</html>
Also works in IE11 -> full example
#frequencySlider {
margin-top: 1px;
width: 100%;
}
#frequencyLabel {
margin-top: 1px;
}
#toggleAudio {
padding: 10px 20px;
height: center;
width: center;
font-size: 15px;
background: #939393;
color: white;
opacity: 0.7;
}
/* Slider */
input[type=range] {
width: 100%;
height: 25px;
margin: 10px 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: transparent;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 5px;
cursor: pointer;
background: #f00;
border-radius: 1px;
border: 0px solid #000;
color: transparent;
}
input[type=range]::-ms-track {
width: 100%;
height: 5px;
cursor: pointer;
background: #f00;
border-radius: 1px;
border: 0px solid #000;
color: transparent;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 5px;
cursor: pointer;
background: #f00;
border-radius: 1px;
border: 0px solid #000;
color: transparent;
}
input[type=range]::-moz-range-thumb {
border: 1px solid #000;
height: 18px;
width: 18px;
border-radius: 50%;
background: rgb(33, 150, 243);
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin-top: -7px;
}
input[type=range]::-ms-thumb {
border: 1px solid #000;
height: 18px;
width: 18px;
border-radius: 50%;
background: rgb(33, 150, 243);
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin-top: -7px;
}
input[type=range]::-webkit-slider-thumb {
border: 1px solid #000;
height: 18px;
width: 18px;
border-radius: 50%;
background: rgb(33, 150, 243);
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin-top: -7px;
}
/* fix for IE11 */
input[type=range]::-ms-thumb {
height: 15px;
width: 15px;
margin-top: 0;
background: rgb(33, 150, 243);
}
<div id="container">
<button id="toggleAudio">
Click Here
</button>
<label id="range" class="range">
<input type="range" min="100" max="4000" value="2000" step="1" id="frequencySlider">
</label>
<br>
<p id="frequencyLabel">Frequency: 2000 Hz</p>
</div>
<input type='checkbox' name='chkbox'/>
I want to change the checkbox height and width and also background color if possible
You can look at this piece of code for starters.
It uses the before element to create a custom shape and hide the default checkbox for two states 'checked' and 'unchecked'
Also give a label for that corresponding checkbox so that clicking this custom shape will actually trigger the hidden default checkbox.
body {
font-family: 'segoe ui';
background-color: white;
padding: 10px;
}
.space {
height: 10px;
}
.checkbox * {
box-sizing: border-box;
position: relative;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.checkbox {
display: inline-block;
}
.checkbox>input {
display: none;
}
.checkbox>label {
vertical-align: top;
font-size: 18px;
padding-left: 30px;
}
.checkbox>[type="checkbox"]+label:before {
color: #777;
content: '';
position: absolute;
left: 0px;
display: inline-block;
min-height: 20px;
height: 20px;
width: 20px;
border: 2px solid #777;
font-size: 15px;
vertical-align: top;
text-align: center;
transition: all 0.2s ease-in;
content: '';
}
.checkbox.radio-square>[type="checkbox"]+label:before {
border-radius: 0px;
}
.checkbox.radio-rounded>[type="checkbox"]+label:before {
border-radius: 25%;
}
.checkbox.radio-blue>[type="checkbox"]+label:before {
border: 2px solid #ccc;
}
.checkbox>[type="checkbox"]+label:hover:before {
border-color: lightgreen;
}
.checkbox>[type="checkbox"]:checked+label:before {
width: 8px;
height: 16px;
border-top: transparent;
border-left: transparent;
border-color: green;
border-width: 4px;
transform: rotate(45deg);
top: -4px;
left: 4px;
}
<div class="checkbox">
<input id="chkTest" type="checkbox" />
<label for="chkTest">Task one</label>
<div class="space">
</div>
<input id="chkTest1" type="checkbox" />
<label for="chkTest1">Task two</label>
</div>
I've used some html/scss to build a dropdown/select menu (I need to have full control of how the dropdown menu looks like).
The problem is that:
IE 11 opens the dropdown only when I click the down arrow instead the
whole text
in Safari 10.1.1 the dropdown doesn't hide after
clicking the menu "button" entry
Any help would be quite welcome (answering why it behaves like that would be awesome)
.onclick-menu {
position: relative;
display: inline-block;
padding: 0px;
margin: 0px 0px 1em 0px;
outline-width: 0px;
}
.onclick-menu:focus {
pointer-events: none;
}
.onclick-menu::before {
padding: 5px 10px 5px 10px;
background-color: black;
}
.onclick-menu__date-box {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 42px;
padding: 5px 10px 0px 10px;
border: 1px solid #d2d6d9;
position: relative;
min-width: 160px;
background-color: white;
border-radius: 5px;
}
.onclick-menu__date-box::after {
content: "";
transform: none;
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDQ4IDQ4IiB3aWR0aD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE0LjgzIDE2LjQybDkuMTcgOS4xNyA5LjE3LTkuMTcgMi44MyAyLjgzLTEyIDEyLTEyLTEyeiIvPjxwYXRoIGQ9Ik0wLS43NWg0OHY0OGgtNDh6IiBmaWxsPSJub25lIi8+PC9zdmc+");
background-size: cover;
display: inline-block;
position: relative;
right: -90%;
bottom: 33%;
z-index: 100;
min-width: 15px;
width: 15px;
max-width: 15px;
min-height: 11px;
height: 11px;
max-height: 11px;
}
.onclick-menu__label {
font-size: 14px;
line-height: 14px;
margin-bottom: 3px;
}
.onclick-menu-header {
color: #073590;
font-weight: bold;
}
.onclick-menu:focus .onclick-menu-content {
opacity: 1;
visibility: visible;
border: 1px solid #e5e7e8;
border-radius: 2px;
box-shadow: rgba(0, 0, 0, 0.12) 8px 8px 6px 0px;
width: -webkit-fill-available;
}
.onclick-menu-content {
pointer-events: auto;
position: absolute;
top: 38px;
left: -1px;
z-index: 1;
opacity: 0;
visibility: hidden;
transition-duration: 0.5s;
transition-property: visibility;
background-color: black;
width: auto;
border: 5px solid 1px black;
margin-top: 19px;
margin-left: 0px;
padding: 5px 15px 5px 5px;
}
.onclick-menu-content::after {
top: -9px;
border: 10px solid white;
}
.onclick-menu-content::before {
top: -10px;
border-bottom-width: 10px solid #e5e7e8;
}
.onclick-menu__date-selector {
border-style: none;
width: 100%;
z-index: 1000;
min-height: 16px;
-webkit-appearance: none;
background-color: white;
color: #073590;
font-size: 16px;
font-weight: bold;
outline-style: none;
}
.onclick-menu-content li {
list-style-type: none;
white-space: nowrap;
background-color: transparent;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
outline-width: 0px;
cursor: pointer;
padding: 5px 0px 5px 8px;
}
.onclick-menu-content li:hover {
background-color: #e8f4fd;
border-radius: 2px;
border-color: white;
}
button,
input,
select,
textarea {
font-family: inherit;
font-size: 100%;
margin: 0px;
}
button,
input {
line-height: normal;
}
button,
select {
text-transform: none;
}
button,
html input[type="button"] {
-webkit-appearance: button;
cursor: pointer;
}
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
}
.onclick-menu-content button {
letter-spacing: 0.03em;
font-weight: bold;
display: block;
width: 100%;
background-color: transparent;
border-style: none;
color: inherit;
cursor: pointer;
outline-width: 0px;
text-align: left;
}
<div tabindex="0" class="onclick-menu__date-box onclick-menu">
<label for="date-select" class="onclick-menu__label">
Take your pick
</label>
<span class="onclick-menu-header">
foo1
</span>
<ul id="date-select" class="onclick-menu-content onclick-menu__date-selector">
<li value="foo1">
<button value="foo1">
foo1
</button>
</li>
<li value="foo2">
<button value="foo2">
foo2
</button>
</li>
<li value="foo3">
<button value="foo3">
foo3
</button>
</li>
</ul>
</div>
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>