Here is a fiddle demonstrating my problem: JSFiddle
I'm making a custom drop down (in reality I'm using an icomoon icon instead of the V)... it looks nice, but the ::after for the parent element is blocking the select :(
<div class="select-style">
<select>
<option value="">...</option>
<option value="1365">Some term</option>";
</select>
</div>
CSS
.select-style {
width: 240px;
height: 26px;
border: 0;
padding: 0;
margin: 0;
position: relative;
&::after {
/*content: "\f107";
font-family: "icomoon";*/
content: "V";
font-size: 18px;
position: absolute;
right: 7px;
top: 0;
}
}
select {
width: 100%;
height: 24px;
border: 1px solid rgb(199, 199, 199);
border-radius: 3px;
background-color: transparent;
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: "";
&::-ms-expand {
display: none;
}
}
I've looked into having JS open the drop down, but found out that doesn't work. I've even tried using z-index to see if that would help... but for some reason the icon gets hidden even though the select has a transparent background.
How can I make it so that the custom icon is visible over the select but does not block my select from being clicked?
Add position:relative and z-index:1 to the select itself
https://jsfiddle.net/hbpqvkqL/
select {
...
position: relative;
z-index: 1;
}
yopu can set the ::after to have z-index: -1;
.select-style {
width: 240px;
height: 26px;
border: 0;
padding: 0;
margin: 0;
position: relative;
&::after {
/*content: "\f107";
font-family: "icomoon";*/
content: "V";
font-size: 18px;
position: absolute;
right: 7px;
top: 0;
z-index: -1;
}
}
Related
I have a button with only a single tag (<a>). I want to skew the background of the button and keep the text as is, so I'm using this code, which is working as expected in my Codepen example:
<a class="et_pb_button et_pb_pricing_table_button" href="#">$200 / Month</a>
.et_pb_pricing_table_button {
margin: 10px;
cursor: pointer;
background-color: transparent;
border: none;
height: 50px;
padding: 10px 60px;
position: relative;
color: #000000;
font-weight: bold;
text-decoration: none;
}
.et_pb_pricing_table_button:after {
z-index: -1;
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: skewX(-15deg);
border-radius: 0px;
background-color: #ffd100;
}
.et_pb_pricing_table_button:hover:after{
background-color: skyblue;
}
However, when I apply that code to my page, it is not rendering as expected (not visible). I can't find anything that is stopping this from working (the parent elements are position: relative). I also tried increasing the z-index of the pseudo selectors, but that didn't help either. What am I missing?
I'm working on Bookmarklet. After removing not-important parts, I have bottom docking draggable window and I want to add resizing. I will probably do this by hand (using mouse down/move/up), but I want to know why resize: both property doesn't work.
I have code like this:
<div class="shell-wrapper docking">
<div class="shell-container">
<nav>
<span class="shell-dock"></span>
<span class="shell-destroy">[x]</span>
</nav>
</div>
<div class="shell-mask"></div>
</div>
.shell-wrapper nav {
cursor: row-resize;
color: #ccc;
border-bottom: 1px solid #ccc;
font-family: monospace;
text-align: right;
background: black;
font-size: 13px;
line-height: initial;
margin: 0;
width: 100%;
height: auto;
display: block;
}
.shell-container {
position: fixed;
background: black;
z-index: 99999;
bottom: 0;
left: 0;
right: 0;
height: 150px;
}
.shell-wrapper .shell-destroy {
padding: 5px;
cursor: pointer;
display: inline-block;
}
.shell-wrapper .shell-mask{
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: none;
z-index: 100
}
.shell-wrapper.drag .shell-mask {
display: block;
}
.shell-wrapper .shell-dock,
.shell-wrapper .shell-destroy {
padding: 5px 3px;
cursor: pointer;
display: inline-block;
}
.shell-wrapper.docking nav {
cursor: default;
}
.shell-wrapper .shell-dock::before {
content: "[■]";
}
.shell-wrapper.docking .shell-dock::before {
content: "[_]";
}
.shell-wrapper.docking .shell-container {
bottom: auto;
right: auto;
top: calc(var(--top, 0) * 1px);
left: calc(var(--left, 0) * 1px);
width: calc(var(--width, 500) * 1px);
height: calc(var(--height, 400) * 1px);
box-shadow: 1px 1px 10px 2px rgb(0 0 0 / 30%);
resize: both; /* this have no effect */
}
You can check the Demo on CodePen.
The code uses jQuery but the question is not related. The problem is in CSS.
I have a piece of html code using the select tag. I need to override the default dropdown icon with a new segoe icon. I did that using the following code:
.select {
border: 1px solid #ccc;
overflow: hidden;
height: 40px;
width: 240px;
position: relative;
display: block;
}
select {
height: 40px;
padding: 5px;
border: 0;
font-size: 16px;
width: 240px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.select:after {
content: "\e0e5";
font-family: segoe mdl2 assets;
color: #000;
padding: 12px 8px;
position: absolute;
right: 0;
top: 0;
background: red;
z-index: 1;
text-align: center;
width: 10%;
height: 100%;
box-sizing: border-box;
}
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<label class="select">
<select name="email" id="email">
<option>aaaa1</option>
<option>aaaa2</option>
<option>aaaa3</option>
<option>aaaa4</option>
<option>aaaa5</option>
<option>aaaa6</option>
</select>
</label>
My problem is, when clicking on the new dropdown icon, the dropdown list doesn't populate. As it is like an icon over the select option tag. I tried to use z-index but it moves the icon completely to back. Can someone provide a solution?
I found the solution. By adding a CSS property
.select:after {
pointer-events: none;
}
in addition to all the CSS properties above, it works.
Changes Some css
select{
height: 40px;
padding: 5px;
border: 0;
font-size: 16px;
width: 240px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
z-index:1; /*Add Z-index*/
position:relative; /*Add Position*/
background:transparent; /*Add Background*/
}
.select:after {
content:"\e0e5";
font-family: segoe mdl2 assets;
color: #000;
padding: 12px 8px;
position: absolute;
right: 0;
top: 0;
background: red;
/*z-index:1;*/ /*Remove Z-index */
text-align: center;
width: 10%;
height: 100%;
box-sizing: border-box;
}
https://jsfiddle.net/yqmb3wxL/
http://fiddle.jshell.net/9m6a5y5p/
As you can is in demo above, when hover above span element tooltip is shown and i want only to show when hover on span... Yes I know i can use display: none, but i am trying to avoid that...
tooltip {
color: #E4095C;
position: relative;
}
.tooltip::before,
.tooltip::after {
opacity: 0;
z-index: -100;
position: absolute;
}
.tooltip:hover::before,
.tooltip:hover::after {
opacity: 1;
z-index: 100;
}
.tooltip::before {
content: '';
border: .825em solid transparent;
border-top-color: #0D8EAD;
bottom: 45%;
left: 35%;
}
.tooltip::after {
content: attr(data-tip);
width: 12em;
padding: .85em;
background: #0D8EAD;
bottom: 175%;
left: 5%;
margin-left: -3.25em;
color: #f8f8f8;
}
Just add following css after .tooltip::after{}
.tooltip::after {
pointer-events: none;
}
Have fun..!!
You can use pointer-events to prevent hover events from firing. Add this to your CSS:
.tooltip::after {
pointer-events: none;
}
I am trying to style the up and down button of the input field number on FF. I have successfully achieved this on chrome with the below code but I can't find any CSS trick to do it on FF.
I can't use JS to do this.
Is it possible to style the up and down using CSS in FF? if so how? - I only need to achieve this on the latest version
DOM
<div class="productQty">
<span></span>
<input type="number" max="10" min="1" class="mod"/>
</div>
CSS
input[type="number"] {
height: 30px;
width: 60px;
font-size: 18px;
position: relative;
background-color: transparent;
border: none;
-moz-appearance: textfield;
}
.productQty span {
display: block;
width: 41px;
height: 30px;
background: white;
z-index: -1;
position: absolute;
top: 0;
left: 0;
bottom: 0;
border: solid 1px #999999;
}
/* Spin Buttons modified */
input[type="number"].mod::-webkit-outer-spin-button,
input[type="number"].mod::-webkit-inner-spin-button {
-webkit-appearance: none;
background: transparent url("../img/updown.png") no-repeat center center;
width: 16px;
height: 100%;
opacity: 1; /* shows Spin Buttons per default (Chrome >= 39) */
position: absolute;
top: 0;
right: 0;
bottom: 0;
}
input[type="number"].mod::-moz-inner-spin-button:hover,
input[type="number"].mod::-moz-inner-spin-button:active{
border: none;
}
/* Override browser form filling */
input:-webkit-autofill {
background: black;
color: red;
}
How does it look on chrome and how it should look
How does it looks in FF 38
You can't directly apply css to the buttons on FF, there is a bugreport about it:
https://bugzilla.mozilla.org/show_bug.cgi?id=1108469
If you don't mind to apply some css to the containing element, you could use the :before and :after to overlay custom buttons.
div:before, div:after {
display: block;
position: absolute;
width: 14px;
height: 8px;
line-height: 8px;
background-color: #ccc;
left: 136px;
z-index: 1;
font-size: 9px;
text-align: center;
pointer-events: none;
}
div:before {
content: "+";
top: 11px;
}
div:after {
content: "-";
top: 20px;
}
<div><input type="number" /></div>