.select-color:before {
content: "\f0dd";
font: normal normal normal 26px/1 FontAwesome;
color: #d0415d;
right: 18px;
top: 4px;
height: 34px;
position: absolute;
pointer-events: none;
padding-right: 10px;
}
select {
padding-top: 8px;
padding-bottom: 8px;
padding-left: 15px;
border-radius: 5px !important;
width: 100px;
height: 45px;
-webkit-appearance: button;
}
<div class="select-color">
<select id="first_m" >
<option ="1">1</option>
<option ="2">2</option>
<option ="3">3</option>
</select>月
</div>
First image doesn't show as normal element in firefox.
But below image does show as normal element in chrome.
You can set -moz-appearance: none and make the parrent .select-color relative.
.select-color:before {
content: "\f0dd";
font: normal normal normal 26px/1 FontAwesome;
color: #d0415d;
right: 18px;
top: 4px;
height: 34px;
position: absolute;
pointer-events: none;
padding-right: 10px;
}
.select-color {
display: inline-block;
position: relative;
}
select {
padding-top: 8px;
padding-bottom: 8px;
padding-left: 15px;
border-radius: 5px !important;
width: 100px;
height: 45px;
-webkit-appearance: button;
-moz-appearance: none; // Added
}
<div class="select-color">
<select id="first_m" >
<option ="1">1</option>
<option ="2">2</option>
<option ="3">3</option>
</select>月
</div>
Related
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>
<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>
Hi guys i have a simple drop down box which i have styled my self but i have no idea how to change the option width. So it looks like this :
As you can tell the drop down is way smaller then the actual box so i was wondering how i can edit this size and get rid of the blue around the box and change its colour. I'm using boostrap 3
HTML:
<div class="styled-select">
<select>
<option>Here is the first option</option>
<option>The second option</option>
<option>The thrid option</option>
</select>
<span class="fa fa-sort-desc"></span>
</div>
CSS:
.styled-select {
border: 1px solid #e6e6e6;
border-radius: 2px;
box-sizing: border-box;
overflow: hidden;
position: relative;
line-height: 20px;
color: #555555;
padding-left: 22px;
font-size: 13px;
font-family: Montserrat-Regular;
}
.styled-select option {
width: 74%;
}
.styled-select, .styled-select select {
width: 74%;
display: inline-block;
}
select:focus {
outline: none;
}
.styled-select select {
height: 40px;
padding: 5px 0 5px 5px;
background: transparent;
border: none;
-webkit-appearance: none;
}
#-moz-document url-prefix() {
.styled-select select {
width: 110%;
}
}
.fa-sort-desc {
position: absolute;
top: 12px;
right: 12px;
font-size: 24px;
}
select::-ms-expand {
display: none;
}
_:-o-prefocus,
.selector {
.styled-select {
background: none;
}
}
Instead of styling a div containing your select object, you should style the select object itself, for instance:
.styled-select {
border: 1px solid #e6e6e6;
border-radius: 2px;
box-sizing: border-box;
overflow: hidden;
position: relative;
line-height: 20px;
color: #555;
padding-left: 22px;
font-size: 13px;
font-family: Montserrat-Regular;
}
.styled-select option {
width: 74%;
}
.styled-select, .styled-select select {
width: 74%;
display: inline-block;
}
select:focus {
outline: none;
}
.styled-select select {
height: 40px;
padding: 5px 0 5px 5px;
background: transparent;
border: none;
-webkit-appearance: none;
}
#-moz-document url-prefix() {
.styled-select select {
width: 110%;
}
}
.fa-sort-desc {
position: absolute;
top: 12px;
right: 12px;
font-size: 24px;
}
select::-ms-expand {
display: none;
}
_:-o-prefocus .styled-select, .selector .styled-select {
background: none;
}
<select class="styled-select">
<option>Here is the first option</option>
<option>The second option</option>
<option>The thrid option</option>
</select>
I have some CSS applied to a few divs. It looks all good on windows, but it behaves differently on Mac on the event of mouse over.
The behavior can be seen here. If you could manage opening it on Mac and on Windows you will notice the difference.
I would appreciate if some can tell me how can i make it behave similar as it behaves on windows. Again, i want it to behave as it behaves on Windows.
I will show my code here as well.
The html
<div class="goal" >
<div class="top-layer" >
<div class="component">
<select class="component-select">
<option value="">select me </option>
<option value="">option one</option>
<option value="">option two</option>
<option value="">option three</option>
</select>
<span id="width_tmp"></span>
</div>
<div class="period" >
<select class="period-select">
<option value="">something</option>
</select>
<span id="width_tmp"></span>
</div>
<div class="close clickable" >X</div>
</div>
and the CSS,
.noselect, .clickable {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.clickable {
cursor: pointer;
/*border: 1px solid transparent;*/
}
.clickable:hover {
/*border: 1px solid #4D7994;*/
background: #3f6379;
}
[contenteditable="true"].single-line {
white-space: nowrap;
overflow: hidden;
display: inline-block;
margin-bottom: -7px;
height: 12px;
max-width: 60px;
}
[contenteditable="true"].single-line br {
display:none;
}
[contenteditable="true"].single-line * {
display:inline;
white-space:nowrap;
}
.goal {
position: relative;
background: #5A8EAE;
width: 364px;
height: auto;
color: #F4F7F9;
float: left;
margin-right: 14px;
margin-bottom: 14px;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.goal span[contenteditable=true] {
padding: 5px;
border: 1px solid #5A8EAE;
padding-left: 2px;
}
.goal span[contenteditable=true]:focus {
background-color: white;
color: black;
border: 1px solid #5A8EAE;
min-width: 10px;
}
.top-layer{
width: 100%;
height: 33px;
float: left;
font-size: 12px;
font-weight: bold;;
}
.component{
float: left;
width: 63%;
padding: 2.5% 3% 3% 2%;
}
.period{
float: left;
padding-top: 10px;
}
.close{
float: right;
padding: 2.8%;
border-left: 1px solid #9FBDCF;
}
select.period-select {
border: 0 !important; /*Removes border*/
-webkit-appearance: none; /*Removes default chrome and safari style*/
-moz-appearance: none; /* Removes Default Firefox style*/
/*background: #0088cc url(img/select-arrow.png) no-repeat 90% center;*/
text-indent: 0.01px; /* Removes default arrow from firefox*/
text-overflow: ""; /*Removes default arrow from firefox*/ /*My custom style for fonts*/
border-radius: 2px;
background-color: #5A8EAE;
color: white;
font-weight: bold;
width:auto;
direction: ltr;
float: right;
font-size: 12px;
padding: 3px 0;
margin-top: -6px;
}
select.period-select:hover, select.component-select:hover {
-webkit-appearance: menulist;
background-color: #3f6379;
color: white;
}
select.component-select {
border: 0 !important; /*Removes border*/
-webkit-appearance: none; /*Removes default chrome and safari style*/
-moz-appearance: none; /* Removes Default Firefox style*/
/*background: #0088cc url(img/select-arrow.png) no-repeat 90% center;*/
text-indent: 0.01px; /* Removes default arrow from firefox*/
text-overflow: ""; /*Removes default arrow from firefox*/ /*My custom style for fonts*/
color: #FFF;
background-color: #5A8EAE;
font-size: 12px;
font-weight: bold;
width:240px ;
padding: 3px 0;
margin-top: -6px;
padding-left:0px;
margin-left:0px;
}
select:hover {
cursor: pointer;
/*background: #0088cc url(img/select-arrow.png) no-repeat 90% center;*/
}
EDIT: You can see the search box live here.
Before I explain, let me show you the code I am using:
HTML
<div class="SiteSearch">
<form action="/search" id="searchform" method="get">
<input x-webkit-speech="" autocomplete="off" type="text" id="gText" name="q" id="q" onblur="if (this.value == '') {this.value = 'Search';}" onfocus="if (this.value == 'Search') {this.value = '';}" value ='' "search" placeholder="Search.."/>
<input type="submit" id="gBtn"/>
</form>
</div>
CSS
#Head .SiteSearch {
top: 12px;
right: 0;
}
#Head .SiteSearch {
float: right;
position: relative;
}
input#gText {
float: left;
width: 225px;
height: 23px;
line-height: 24px;
text-indent: 5px;
font-family: arial,sans-serif;
font-size: 1em;
color: #333;
background: white;
border: solid 1px #D9D9D9;
border-top: solid 1px silver;
border-right: none;
vertical-align: middle;
-webkit-appearance: none;
-webkit-border-radius: 0px;
}
#searchform #gBtn {
background-image: url('search.png');
width: 31px;
height: 27px;
}
#gBtn {
vertical-align: middle;
cursor: pointer;
width: 40px;
height: 31px;
line-height: 100%;
padding: 0;
font-size: 0;
text-indent: -999px;
color: transparent;
background-position: 0 0;
border: none;
-webkit-appearance: none;
-webkit-border-radius: 0px;
}
input#gBtn:hover {
background-position: 31px 0;
border: none;
}
This is how the search box looks on IE7 vs. IE8/IE9:
vs.
As you can see above, the input button image isn't being shown in IE7. How can I fix this?
Any help is appreciated. Thanks!
I fixed it by modifying the CSS code like so:
#Head .SiteSearch {
top: 12px;
right: 0;
}
#Head .SiteSearch {
float: right;
position: relative;
}
input#gText {
float: left;
width: 225px;
height: 23px;
line-height: 24px;
text-indent: 5px;
font-family: arial,sans-serif;
font-size: 1em;
color: #333;
background: white;
border: solid 1px #D9D9D9;
border-top: solid 1px silver;
border-right: none;
vertical-align: middle;
-webkit-appearance: none;
-webkit-border-radius: 0px;
}
/* REMOVED THIS PIECE
#searchform #gBtn {
background-image: url('search.png');
width: 31px;
height: 27px;
}*/
#gBtn {
vertical-align: middle;
cursor: pointer;
width: 40px;
height: 31px;
line-height: 100%;
padding: 0;
font-size: 0;
text-indent: -999px;
color: transparent;
background-image: url('search.png'); /* ADDED */
background-position: 0 0;
border: none;
-webkit-appearance: none;
-webkit-border-radius: 0px;
}
input#gBtn:hover {
background-image: url('search.png'); /* ADDED - BUT OPTIONAL */
background-position: 31px 0;
border: none;
}
Write background instead of background-image in your #gBtn button. May be that's work