There is an Select Element in a page, it working awesome in Firefox but very sick in Google Chrome..
Firefox snap
Google Chrome snap
..
HTML
<select id="dropDown" class="dropDown">
<option>Design & Creative</option>
<option>Share Point Developer</option>
<option>Software Development Engineer</option>
<option>Silverlight Developer</option>
<option>Dot Net Developer</option>
<option>Quality Assurance</option>
<option>Mobile Application</option>
<option>IT Sales</option>
</select>
CSS
.dropDown {
-webkit-appearance: none;
height: 60px;
width: 450px;
background: #c03400;
font-size: 12pt;
color: #fff;
border: none;
outline: none;
padding: 20px 15px;
display: block;
clear: both;
}
.dropDown option {
-webkit-appearance: none;
height: 10px;
padding: 10px;
color: #626262;
background: #f5f3f3;
outline: none;
padding: 10px 15px;
display: block;
box-shadow: none;
border: none;
}
.dropDown:hover, .dropDown:focus {
background: #a62e01;
}
The size difference in Chrome is because of the height attribute. You can't set the height of an option element in Google Chrome. How can I control the height of an Option element in Webkit?
Related
I want to set font awesome icon on select drop down and change the background color as well... I tried this code but it won't be work..
Here is my CSS code:
select {
border-radius: 30px;
padding: 0px 70px 1px 20px;
margin-top: 50px;
margin-left: 45px;
font-size: 18px;
border: 2px solid orange;
box-shadow: 10px 3px 8px #888888;
appearance: none;
position: relative;
}
select i {
position: absolute;
float: right;
background-color: orange;
bottom: 0px;
pointer-events: none;
}
Here is my HTML Code:
<div class="row">
<p class="search">Search by Location</p>
<select class="dropdown">
<option>Canada</option>
</select>
<i class="fas fa-angle-down"></i>
</div>
Edited Answer
select.input-lg {
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
/* no standardized syntax available, no ie-friendly solution available */
}
select + i.fa {
float: right;
margin-top: -30px;
margin-right: 5px;
/* this is so when you click on the chevron, your click actually goes on the dropdown menu */
pointer-events: none;
/* everything after this is just to cover up the original arrow */
/* (for browsers that don't support the syntax used above) */
background-color: #fff;
padding-right: 5px;
}
Source: I want to change the select icon/dropdown icon to (fa-chevron-down). How can I?
Also you may follow this: font awesome icon in select option
For his code and a fontawesome solution
.row select {
display: inline-block;
appearance: none;
margin-right: -24px;
padding-right: 36px;
}
.row i {
pointer-events: none;
font-size: 1rem;
}
worked for me.
I'm trying to fix an issue with a hoverable span in html. Inside the span element is a html-select option. When I try to select something, the hoverable span disappears.
This issue only occurs in Firefox. In Chrome I don't have this issue.
HTML Part:
<span class="over">
<i class="fa fa-cogs edit"></i>
<div>
<form method="post" accept-charset="utf-8" action="/edit">
<div class="input select">
<label for="select-id">Select</label>
<select name="select_id" id="select-id">
<option value="">-- select --</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
</div>
</form>
</div>
</span>
SCSS Part:
.over{
margin-right: 0.5em;
&>i{
color: #bbbbbb;
padding: 2px;
}
&>a{
padding: 2px;
display: none;
&:hover{
color: #000;
}
}
&>div{
display: none;
position: absolute;
border: 1px solid #ccc;
margin: 6px 0 0 -20px;
padding: 2px;
background: white;
border-radius: 4px;
min-width: 140px;
z-index: 100;
text-align: left;
input, select{
padding: 0 5px;
line-height: 1.5em;
width: auto;
display: inline-block;
}
label{
margin: -4px 4px;
display: inline-block;
}
}
&:hover{
border: 1px solid;
border-radius: 4px;
&>i{
color: #000;
}
&>a{
display: inherit;
}
&>div{
display: inline-block;
}
}
}
}
In Chrome I can hover over the span item and select a option from the select-element. Even if I leave the hoverable area.
In Firefox I can also hover over the div, but as soon as I leave the hoverable area, the box disappears and I cannot select an Item.
Problem seems to be fixed in Firefox now.
I'm trying to style the default file upload button using :before pseudo element. Here is my code. It is working fine in safari and chrome. But does not work in Firefox. When inspecting , it seems like :before element does not appear in firefox. How can this be fixed?
Code is give below.
fiddle for those who prefers it - https://jsfiddle.net/ujucukxr/
input[type="file"] {
font-size: 0.5em;
}
.file-upload::-webkit-file-upload-button {
visibility: hidden;
}
.file-upload:before {
content: 'Select a custom file';
display: inline-block;
background: #03C9A9;
border-radius: 2px;
padding: 5px 8px;
outline: none;
color: white;
white-space: nowrap;
-webkit-user-select: none;
cursor: pointer;
font-weight: 500;
font-size: 13px;
margin-right: 20px;
}
.file-upload:hover:before {
border-color: #1BBC9B;
}
.file-upload:active:before {
background: #1BBC9B;
}
<input id="push-notif-icon-upload" class="file-upload" accept="image/*" type="file" name="push_campaign[logo_attributes][upload]">
I need to add some custom styles to HTML select box completely changing its default style.
This is how my select box should be after adding custom styles.
I could have to get these styles to certain level. But still not 100%.
This is my HTML and CSS.
<span class="custom-dropdown large">
<select class="select select_large">
<option>Select an Option</option>
<option>Option One</option>
<option>Option Two</option>
<option>Option Three</option>
<option>Option Four</option>
<option>Option Five</option>
</select>
</span>
.large {
font-size: 15px;
}
.select{
font-size: inherit;
padding: 10px;
margin: 0;
}
.select_large {
background-color: #001848;
color: #fff;
}
.select_large option{
background-color: #dadada;
color: #000;
border: none;
padding: 2px 5px;
}
.select_large option::hover {
background-color: #20b390;
}
#supports (pointer-events: none) and
((-webkit-appearance: none) or
(-moz-appearance: none) or
(appearance: none)) {
.custom-dropdown {
position: relative;
display: inline-block;
vertical-align: middle;
}
.select {
padding-right: 40px;
border: 0;
border-radius: 3px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.custom-dropdown::before,
.custom-dropdown::after {
content: "";
position: absolute;
pointer-events: none;
}
.custom-dropdown::after { /* Custom dropdown arrow */
content: "\25BC";
font-size: 20px;
line-height: 15px;
right: 10px;
top: 50%;
margin-top: -5px;
}
.custom-dropdown::before { /* Custom dropdown arrow cover */
width: 40px;
right: 0;
top: 0;
bottom: 0;
border-radius: 0 3px 3px 0;
}
.large::before {
background-color: #001848;
//background-color: #dadada;
}
.large::after {
color: #dadada;
//color: #434343;
}
#-moz-document url-prefix() {
.select { padding-right: .9em }
.large .select { padding-right: 40px }
.small .select { padding-right: .5em }
}
}
This is a FIDDLE
Hope somebody will help me out.
Thank you.
Selects are really annoying to style. This is because they depend on the browser and operating system and therefore parts of them are not style-able. For example, you can change the background color of the options, but if an option is selected, the styling gets messed up (you can't change the color of the selected option).
Try looking into some jQuery plugins like ms-Dropdown: http://www.marghoobsuleman.com/jquery-image-dropdown
Your safest bet is to find a js plugin that will render a dynamic with custom styling while maintaining the functionality of your .
The problem with customizing with custom CSS is that its usually the OS who styles them and its looks change from OS to OS considerably, making it nearly impossible to style in an uniform matter with pure CSS.
simply do a search for 'jquery selectbox' or 'jquery custom select'
Here is the fiddle. I am trying to style the <select> and <input id='checkbox'> using CSS. I am currently using select {background: #4a4a4a} and it works, but I cannot get any other styles to work. The checkbox style doesn't work at all when using input[type='checkbox'] {background: #4a4a4a}
HTML:
<select>
<option>Hello</option>
<option>Hola</option>
<option>Bonjour</option>
</select>
<input type='checkbox'>
CSS:
body {
background: #252525;
}
select {
background: #4a4a4a;
border-radius: 0px;
}
input[type='checkbox'] {
background: #4a4a4a;
border-radius: 0px;
}
JS:
none
Edit
I have started a project where I am making my own not styleable form elements. For more info see this question.
Styling checkboxes
Styling checkboxes is tricky and inconsistent across browsers. Here is pure CSS approach. It takes advantage of that when label and input are connected with an id= , clicking on the label activates the input box itself. No JavaScript needed there.
HTML
<input type="checkbox" id="my-checkbox">
<label for="my-checkbox">Checkbox label text
<span class="checkbox"></span>
</label>
CSS
Hide checkbox, style the <span> as you like. I've used a CSS sprite here.
input[type="checkbox"] {
display: none;
}
input[type="checkbox"] + label .checkbox {
display: inline-block;
width: 22px;
height: 19px;
vertical-align: middle;
background: url('ui-sprite.png') left -90px no-repeat;
cursor: pointer;
}
input[type="checkbox"]:checked + label .checkbox {
background: url('ui-sprite.png') -30px -90px no-repeat;
}
Styling select inputs
I haven't found a simple working solution for this yet.
Here is an article about a hack that seems to be on a good way.
Given how every browser has its own rules and exceptions when it comes to input element styling, I tend to use things like http://uniformjs.com/ for consistent input styling. Slows things down on pages with thousands of input elements, but otherwise quite excellent.
You cannot style all form elements. Browsers tend to not allow you to style check-boxes and select boxes (As well as drop downs, radios, file uploads etc...). The general concept I have used before is to hide the actual element and use a replacement element such as a div to display to the user. That div can be styled to look and work the way you want. The tricky part and part most often missed is you have to actually change the state of the hidden form element when the user interacts with the mock element.
This is a JQuery Plugin that will provide the above functionality. This plugin was written with the intent that the user would style the elements according to what they need. Here is an example JsFiddle that demonstrates the plugin and exposes the CSS selectors with some basic styling. Basic code below...
HTML
<form>
<select>
<option>Hello</option>
<option>Hola</option>
<option>Bonjour</option>
</select>
<br/>
<input type='checkbox'>
</form>
JQuery
$(document).ready(function () {
$('body').styleMyForms();
});
CSS
body {
background: #252525;
}
.sf {
position: relative;
display: block;
float: left;
}
.sf-checkbox {
top: 6px;
margin-right: 5px;
height: 15px;
width: 15px;
background: #fff;
border: 1px solid #444;
cursor: pointer;
background: #4a4a4a;
border-radius: 0px;
}
.sf-select {
display: block;
width: 220px;
border: 1px solid #222;
background: #4a4a4a;
border-radius: 0px;
padding: 0px 10px;
text-decoration: none;
color: #333;
margin-bottom: 10px;
}
.sf-select-wrap {
position: relative;
clear: both;
}
.sf-select-ul {
background: #fff;
display: none;
list-style: none;
padding: 0;
margin: 0;
position: absolute;
border: 1px solid #888;
width: 240px;
padding: 0px;
top: 33px;
}
.sf-select-ul li {
position: relative;
cursor: pointer;
padding: 0px 10px;
color: #333;
}
.sf-select-ul li:hover {
background: #efefef;
}
.sf-select-ul li.selected {
background: #508196;
color: #fff;
}
.sf-select:focus, .sf-radio:focus, .sf-checkbox:focus, input[type="text"]:focus {
border-color: #222;
}
.sf-select:hover {
}
.sf-radio:hover, .sf-checkbox:hover, input[type="text"]:hover, input[type="text"]:focus, .sf-select:focus {
background: #efefef;
}
.sf-radio.selected, .sf-radio.selected:focus, .sf-radio.selected:hover, .sf-checkbox.selected, .sf-checkbox.selected:focus .sf-checkbox.selected:hover {
background: #9cb7c3;
}
.clear {
clear: both;
}
.buttonish {
display: block;
font-family:'Francois One', sans-serif;
font-weight: normal;
font-size: 2.8em;
color: #fff;
background: #9cb7c3;
padding: 10px 20px;
border-radius: 3px;
text-decoration: none;
width: 480px;
text-align: center;
margin-top: 50px;
text-shadow: 2px 2px 4px #508196;
box-shadow: 2px 2px 4px #222;
}
Think in boxes, how many boxes does a populated select seem to have when you look at it in a browser...
a lot, and they have lots of associated styles/scripts (background/colors,paddings, the functionality open/close etc.)
And actually you don't see anything of that in your code
So the code can only come from the browser
and browsers are different, all answers are correct, don't try to style it, let a JavaScript replace the elements and functionality.