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.
Related
Simply put, I want to make an icon button with text that downloads a file when the user clicks it, and my html code isn't doing that. The twist is, I have an icon button elsewhere on my page to do that exact same thing, and that one works.
The reason I'm including this ability twice in my page is because I want the user to be able to download this file no matter where they are in the page. The icon-button-with-text is the expected go-to place to get the file because it has an icon and text explaining what the button does. Here's its example code:
button {
cursor: pointer;
height: 56px;
width: 214px;
margin-bottom: 5%;
border-radius: 4px;
font-family: sans-serif;
font-size: 16px;
line-height: 56px;
filter: drop-shadow(2px 2px 4px rgb(0 0 0/0.75));
}
.button1 {
background: none;
border: none;
outline: 2px black solid;
padding-left: 8.2%;
}
.button1 a {
color: black;
}
.button1 a:hover {
cursor: pointer;
}
.button1 span {
position: absolute;
top: 0px;
left: 42px;
}
.activeState {
display: none;
}
.inactiveState {
position: absolute;
height: 18px;
width: 18px;
top: 8px;
left: 16px;
}
.button1:active .activeState {
display: inline-block;
position: absolute;
height: 18px;
width: 18px;
top: 8px;
left: 16px;
}
.button1:active .inactiveState {
display: none;
}
<button class="button1">
<a href="files\downloadableFile.pdf" download>
<img class="inactiveState" src="graphics\downloadFile_inactive.svg">
<img class="activeState" src="graphics\downloadFile_active.svg">
<span>
Download File
</span>
</a>
</button>
However, the icon-button-with-text is part of the body content, and so will scroll up and out of sight as the user goes through the page. So that the user can download the file no matter where they are in the page, I made an icon-button in my fixed top app bar. Here's its example code:
li {
list-style-type: none;
}
.icon {
width: 24px;
height: 24px;
padding-top: 8px;
text-align: center;
}
.inactiveState {
height: 24px;
width: 24px;
top: 16px;
filter: drop-shadow(2px 2px 4px rgb(0 0 0/0.75));
}
.activeState {
display: none;
height: 24px;
width: 24px;
top: 16px;
margin-left: 12px;
filter: drop-shadow(2px 2px 4px rgb(0 0 0/0.75));
}
li:active .inactiveState {
display: none;
}
li:active .activeState {
display: block;
margin-left: auto;
margin-right: auto;
}
li:hover {
cursor: pointer;
background: none;
outline: 2px black solid;
border-radius: 4px;
}
<li class="icon downloadResume">
<a href="files\downloadableFile.pdf" download>
<img class="inactiveState" src="icons\downloadFile_inactive.svg">
<img class="activeState" src="icons\downloadFile_active.svg">
</a>
</li>
The icon-button was part of a menu of other links, so I made it a list item instead of an actual button.
Both buttons have the same icons and the same link states for those icons. Aside from the icon-button not having text and being a list item instead of a button proper, I don't see any difference between the two.
And yet, when I click on the icon-button, my file downloads. When I click on the icon-button-with-text, the icon state also changes like it's supposed to, but the file doesn't download. There's not even a snackbar in the corner mentioning the address of the file when I hover over the icon-button-with-text, whereas that happens when I hover over the icon-button.
Why is this happening, and what can I do so that the same file downloads from the two buttons?
Thank you in advance!
You must not wrap an anchor in a button. Both elements are clickable, so behavior is not really consistent accross browsers ¹ ²
Alas, W3C's validator reports an error when nesting those elements, so it simply is not valid HTML.
Error: The element a must not appear as a descendant of the button element.
<button>stackoverflow</button>
Instead, replace your button with a div:
<div class="button1">
<a href="files\downloadableFile.pdf" download>
<img class="inactiveState" src="graphics\downloadFile_inactive.svg">
<img class="activeState" src="graphics\downloadFile_active.svg">
<span>
Download File
</span>
</a>
</div>
And of course change your CSS accordingly:
div.button1 {
cursor: pointer;
height: 56px;
width: 214px;
margin-bottom: 5%;
border-radius: 4px;
font-family: sans-serif;
font-size: 16px;
line-height: 56px;
filter: drop-shadow(2px 2px 4px rgb(0 0 0/0.75));
}
.button1 {
background: none;
border: none;
outline: 2px black solid;
padding-left: 8.2%;
}
/* ... */
If file's path is files\downloadableFile.pdf then in href="" set the path and in download="" set the file.
<a href="files" download="downloadableFile.pdf">
<img class="inactiveState" src="icons\downloadFile_inactive.svg">
<img class="activeState" src="icons\downloadFile_active.svg">
</a>
Check boxes are working fine in chrome but not in internet explorer.
Here is my HTML code:
<div class="patient-div-w" style="width: 9.5vw;">
<input type="checkbox" id="edema" class="input-checkbox-l">
<label class="label-n" for="edema" style="line-height: 8vh;">Edema</label>
<br>
</div>
Here is my CSS code:
input[type="checkbox"] {
opacity: 0;
margin: 0px 3px 0px 0px;
}
.input-checkbox-l[type="checkbox"] + label {
background-image: url(../images/unchk.png);
background-size: 1.2vw;
background-repeat: no-repeat;
padding-left: 1.7vw;
background-position: 0vh 0vw;
width: 8vw;
margin: 0vw;
position: relative;
top: -.1vh;
left: -1.6vw;
white-space: nowrap;
font-family: "Roboto Regular";
}
.label-n {
font-size: 1vw;
color: #000;
}
The same is the problem with radio buttons.
Any kind of help is highly appreciated.
Try this:
Lets assume the parent of .patient-div-w is .parent-div. So we need to do the following:
.parent-div{
overflow: auto;
zoom: 1;
}
This is a very common issue. You can read more about it here
Try this
In your code
<label class="label-n" for="edema" style="line-height: 8vh;">Edema</label> Just remove inline style="line-height:8vh;. it will work.
you can use below code as a reference and it will work IE, FF, Chrome
.input-checkbox-l[type="checkbox"] + label {
box-sizing:border-box;
padding:0px 20px 0px 55px;
background:url(https://i.stack.imgur.com/EAkMC.png) no-repeat center left 5px;
background-size: 30px;
font-size:22px;
margin-right:5px;
display:inline-block;
}
You can try without image
input[type="checkbox"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 20px;
height: 20px;
background-color: #fff;
border: 1px solid #ccc;
cursor: pointer;
outline: none;
}
input[type="checkbox"]:checked {
border:1px solid blue;
outline: none;
}
div{
display: inline-block;
}
div span{
vertical-align: super;
}
HTML
<div>
<input type="checkbox" name="" value="1"><span>Label name</span>
</div>
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?
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.
I built the following website basically from scratch, and it works perfectly on most browsers (Chrome, Firefox, Safari, Edge), but unsurprisingly not on IE (tested on 9,10,11): Alliance Française du Manitoba
The problem is with the dropdown menus. When hovering over one of the menu headers (<div class="headerMenuItem">), a mega-menu (<div class="headerMenuDropdown">) should appear. Currently, when hovering, the headerMenuItems are highlighting, as expected, but the child headerMenuDropdown isn't appearing.
/***Header Menu***/
#headerMenu { /*Menu Wrapper*/
float: left;
margin: 12px auto 0px;
padding: 0px;
}
.headerMenuItem { /* Individual menu item */
display: block;
float: left;
overflow: hidden;
border-radius: 5px 5px 0px 0px;
margin-top: 6px;
padding-bottom: 10px;
}
.headerMenuItem:hover {
background-color: #d4d9db;
text-decoration: none;
}
.headerMenuItem>a {
padding: 8px 12px 0px;
text-align: center;
border-radius: 5px 5px 0px 0px;
font-weight: bold;
color: #444;
}
.headerMenuItem a:hover { /* override default link behaviour */
text-decoration: none;
color: #444;
}
/*Menu expand*/
.headerMenuDropdown { /* mega-menu wrapper */
float: left;
display: none;
position: fixed;
background-color: white;
width: 100%;
left: 0;
top: 100%;
border-top: 1px solid #da002e;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 105;
text-align: center;
}
.headerMenuItem:hover .headerMenuDropdown { /*Display dropdown*/
display: block;
animation: headerDropdownAppear;
animation-duration: 0.4s;
}
#keyframes headerDropdownAppear {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Create up to 6 equal columns that floats next to each other */
.row {
width: 1200px;
display: block;
margin-left: auto;
margin-right: auto;
}
.column {
float: left;
width: 15.53848%;
padding: 10px 10px 10px 0px;
}
.column span,
.column a {
float: none;
text-decoration: none;
display: block;
text-align: left;
padding: 1px;
}
.column>span {
font-weight: bold;
}
.column>span>span {
padding-left: 15px;
text-indent: -10px;
font-weight: lighter;
font-size: 0.8em;
}
.column>span>span>a {
padding-left: 15px;
margin-left: -15px;
padding-bottom: 3px;
line-height: 120%;
}
.column a:hover {
background-color: #d4d9db;
}
<div id="headerBottom">
<nav id="headerMenu">
<div class="headerMenuItem">
Learn French
<div class="headerMenuDropdown">
<div class="row">
<div class="column">
<span>
Column 1
<span>
Link 1
</span>
<span>
Link 2
</span>
...
</span>
</div>
<div class="column">
<span>
Column 2
...
</span>
</div>
...
</div>
</div>
</div>
<div class="headerMenuItem">
Tests & Exams
<div class="headerMenuDropdown">
<div class="row">
...
</div>
</div>
</div>
...
</nav>
...
</div>
I assumed that this had to do with one of two known IE bugs:
:hover inconsistencies
Unsuported > selector
However, both of these should have been phased out as issues by IE 9, but I'm having issues on IE 11! I've got a proper <!DOCTYPE html>, HTML5Shiv, and even crossover.htc, but nothing seems to work.
This leads me to think that the issue is with the CSS selector
.headerMenuItem:hover .headerMenuDropdown
EDIT: However, IE Inspector shows that it's behaivng properly!
Any known fixes?