I need to change custom cursor for scrollbar in Chrome. I have lightbox which has set custom cursor with big X and Close text. Problem is that in chrome the cursor definition is inherited by the scrollbar as well, which looks a bit funny.
See the fiddle:
<div class="below">
<div class="full">
<div class="scrollable">long text</div>
</div>
</div>
CSS:
.full{
position:fixed;
background:red;
height:100%;
width:80%;
overflow-y:scroll;
cursor: url('cursor.cur'),not-allowed;
}
.scrollable{
padding:1em;
background:white;
position:relative;
display:block;
width:80%;
margin:50px auto;
}
http://jsfiddle.net/3fY9r/1/
is there any way how to trigger the scrollbar only and change the appearance back to default cursor?
You can use the vendor selectors for chrome's scrollbar to set styles. However, I don't think it will allow you to change the cursor. You could try this to see if it works:
::-webkit-scrollbar {
cursor:pointer;
}
UPDATE
After looking more into this issue, apparently there is a bug with Chrome and updates to the cursor on scrollbars. Here is the ticket, it is still open. You can still change the styles, but the customizations seem a bit limited.
Try adding cursor: auto to your scrollable class
.scrollable {
cursor: auto;
}
Works with textareas, not sure with divs.
Related
I found a very weird bug today while developing a new site, I really don't know why in the hell it's happening, but I think someone might know.
I made a navigation menu fixed to the top-right part of the page, within it, a big div made round from a lot of border-radius.
It was working very fine and normal untill I added to the right bar a facebook page plugin.
When the bottom of that div goes over the title of the page in the plugin, the border-radius disappears. It stays a square div while it's there, goes back to round if I scroll the page and stays round until it's "touching" that very specific part of that page plugin.
I really don't have a clue about why, here's some code for better understanding:
.nav {
position:fixed;
width:100%;
text-align:right;
z-index:9999;
}
.face {
position:absolute;
width: 20%;
background:#F93;
top:5px;
right:10px;
border-radius:9999px;
overflow:hidden;
}
.face:before {
content: "";
display: block;
padding-top: 95%;
}
.face a img {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
width:100%
}
.menu{
display:inline-block;
background:#FFF;
padding:1em;
width:50%;
text-align:left;
border-top-left-radius: 100px;
border-bottom-left-radius: 100px;
margin-top:3%;
}
.menu a {
padding:0 0.5em;
border-radius:4em;
}
And also:
<div class="nav">
<div class="menu">
menumenumenumenu
</div><br/>
<div class="name">
<h2>name</h2>
</div>
<div class="face">
<img src="i/image.png"/>
</div>
</div>
By the way, it seems to happen only on webkit browsers, on firefox it looks very normal, didn't even test in internet explorer.
EDIT: Just tested on Internet Explorer and SURPRISINGLY it did work very well, this is now very very weird
EDIT2: Some Screenshots for even more clarification:
Before touching the title:
After it gets on that very specific spot:
Further down:
Anytime it's over the title it's not round, elsewhere it's fine.
EDIT3: I found out that there was another place the bug was happening; I have a jquery slider on the page; I had an Opacity effect on hover on some controls, when these opacity was being animated, it reproduced the disappearing border-radius problem, and then went back to normal by itself; Removing opacity CSS rule from the neutral state made the bug stop happening while hovering the slider, but it keeps hapenning while that div is over the facebook plugin
There may be more going on here because of the Facebook plugin, but it sounds like this is a problem of not taking into account Webkit CSS rules. If that's the problem, I'm surprised that Firefox isn't giving you trouble. The standard way to style rounded corners with cross-browser support is to give border-radius, then -moz-border-radius and -webkit-border-radius:
.menu {
...
border-radius: 100px 0px 0px 100px;
-moz-border-radius: 100px 0px 0px 100px;
-webkit-border-radius: 100px 0px 0px 100px;
...
}
.menu a {
...
border-radius: 4em;
-moz-border-radius: 4em;
-webkit-border-radius: 4em;
}
Ok, I found a fix for the problem, that I can only think I didn't thought before because I was too tired. ^^'
First of all, I found out that this bug was even weirder than I thought, thinking back how the opacity on another element seemed to affect it, I tried changing the image opacity, then, I found out that the div that contained it was in fact, still round.
Even though the image was being cut by the overflow:hidden; it wasn't being cut by the border-radius of the parent div.
I fixed it by putting border-radius on the image too, so now it is round even when over that plugin, the problem is gone now.
I hope someday this gets found by some webkit developers and the identify and fix that bug, it was really weird.
Thanks Henry for the help too!
TL;DR
Fixed by using border-radius on both parent div and image.
I'm using nw.js for html/css/js desktop app and cannot completely remove mouse cursor in full screen mode.
I've removed it by setting css properties cursor: none, margin: 0, padding: 0 on the body/html. And also toolbar: false and fullscreen: true are set in package.json.
But the cursor is visible a few pixels on all the edges of screen (picture bellow).
Strange behaviour, does someone know how to completely remove it?
NOTE: This is just an issue in NW.js, as it works perfectly in all browsers and also in the xulrunner, as we migrated in the company from xulrunner to node-webkit (nw.js) all applications got this issue.
I suspect another element is applying cursor:auto, essentially overriding your CSS rule.
Consider the following basic example:
html, body {
background:#000; color:#FFF;
padding: 0; margin: 0;
text-align: center;
cursor:none;
}
div {
margin:2em;
padding:1em;
background:#555;
cursor:auto;
}
<div>
<p>This div has cursor:auto</p>
</div>
As you can see, the element gets the normal cursor because it has a cursor:auto rule.
Since you did not provide your code, I can't know exactly which element is getting the rule, you can inspect in the devtools to catch it. Otherwise, you can override ALL cursor rules with this CSS line:
* { cursor: none !important; }
And to see that in action:
html, body {
background:#000; color:#FFF;
padding: 0; margin: 0;
text-align: center;
cursor:none;
}
div {
margin:2em;
padding:1em;
background:#555;
cursor:auto;
}
* { cursor: none !important; }
<div>
<p>This div has cursor:auto but gets overriden</p>
</div>
Edit: iframes
The cursor cannot be hidden in documents loaded through an iframe. The iframe would need to get that CSS rule locally.
See iframe demo: https://jsfiddle.net/azizn/rr7bsrc7/1/
I have also the same issue. I think the best solution for us would be to switch to Electron or wait until a stable version 0.13 of nw.js is released.
I have an input of type search that I am trying to resize the height of. The height is never actually reflected unless I apply a border to the element. I have tried using line-height, font-size, min-height,max-height, and the height attribute on the element itself, nothing seems to work. Is there any way to resize the search box without applying a border?
#search{
display:block;
width:90%;
margin:10px auto 0;
height:50px;
}
#searchborder{
display:block;
width:90%;
margin:10px auto 0;
height:50px;
border:1px solid black;
}
<input id="search" type="search">
<input id="searchborder" type="search">
Update
So after checking on a Windows Machine it seems like the search input is rendering properly, for reference here is what I'm seeing on my Mac.
Any way to make this render properly on OSX?
Much of the time these two CSS/HTML snippets alone function the exact same and have height applied. The only difference is you can see the border on the #searchborder input.
However, search inputs can be rendered differently in different OS and Browsers. Webkit can be tricky with OSX. See the following article about styling CSS search inputs:
https://css-tricks.com/webkit-html5-search-inputs/
A suggestion at the bottom of that page would be to remove the webkit appearance by adding a CSS line and then the height will be applied:
#search{
-webkit-appearance: none;
display:block;
width:90%;
margin:10px auto 0;
height:50px;}
css:
* {
margin:0;
padding:0;
}
.blue-button
{
width:auto;
display:inline-block;
}
.blue-button:before
{
/*background-image:url('blue-button.gif');*/
background:red;
width:5px;
height:21px;
display:block;
content:"\00a0";";
float:left;
}
.blue-button span
{
background:#00AEEF;
display:block;
height:100%;
text-align:center;
margin-left:5px;
padding:3px;
padding-left:8px;
padding-right:8px;
color:white;
}
body:
<div class="blue-button"><span>abcdef</span></div>
So basicly this is just a div with prepended div using before. I want span inside .blue-button to resize to the text. It works fine on Chrome but fails on IE/FF - in those browsers blue div is in the next row (it should be in the same row as red div). How I can fix it?
This is a problem due to IE being unable to recognize the attribute
display: inline-block;
IE explorer will display it inline, and to achieve the desired effect you need to give the content 'Layout' using
zoom: 1;
or similar.
This article was helpful to me, check it out to fully understand what I'm trying to say!
http://flipc.blogspot.co.uk/2009/02/damn-ie7-and-inline-block.html
I just set up a jsfiddle with your code, and FF puts the red and blue parts on differnt rows too. There's an error in your CSS which, when I fixed it, fixed FF and also ran fine in IE8. Which version of IE are you having trouble with?
content:"\00a0";";
should be
content:"\00a0";
Can you confirm that this is just a typo, or does it fix it for you too?
I am developing for an existing web application on an internal server, I can't really post all the code here as it's very very messy but I can show you guys a screenshot of the problem and the relevant css code:
The languages menu should be on top of the blue bordered box, but instead it's beneath.
It works great in FF, this is a IE7 screenshot
blue bordered box css:
.categoryBox {
width:100px;
background-color:#000;
border-style:solid;
border-width:1px;
border-color:#007CF7;
padding:5px;
float:left;
height:260px;
margin-right:25px;
margin-bottom:20px;
text-align:center;
width:200px;
position:relative;
}
language menu css:
#ChooseLanguageDlg
{
display: none;
position: absolute;
width: 87px;
height: 180px;
padding-left: 10px;
padding-right: 10px;
padding-top:0;
margin-top: -9px;
border: none 1px White;
left: 751px;
top: 10px;
font-size:11px;
overflow:hidden;
text-align:center;
}
Note: the languages menu is using a javascript toggle to show/hide.
EDIT:
Adding z-index to the language box does not change the visibility in IE
IE7 has known problems with z-index. Without seeing your page, the best I can do is point you to some useful links which explain the problem:
http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/
IE7 Z-Index Layering Issues
http://richa.avasthi.name/blogs/tepumpkin/2008/01/11/ie7-lessons-learned/
The general idea is to poke position: relative (usually remove it) and z-index on parent elements of your drop down until it's fixed.
Good luck!
Setting the z-index of the language box manually may help. Of course, if you don't want to do this, putting the language box after the blue box in the markup will do the trick too.
You could try adding a z-index. This'll define which element is on top of which element:
z-index
add a z-index to the style for the language box?
IE has some problem with z-index (see Google). As I had to fix a similar problem I was forced to use javascript to hide the background elements, which isn't really suitable for you.
You could try to change the order of creation in the html code, if possible.