I am looking for the name of the "forbidden/cancel" cursor.
I can't seem to find it.
The values of cursor that represent what you're looking for are not-allowed and no-drop. These values are new to CSS3, so if you need browser compatibility you should specify an image instead.
The css cursor: not-allowed; also works.
here is complete sample:
.not-allowed {
cursor: not-allowed;
}
<input type="submit" value="not-allowed" class="not-allowed" disabled />
Related
Not able to change placeholder opacity in ionic v4
i have tried to change opacity of ion-select placeholder in
global.css
following is my code
.select-placeholder
{
opacity: 1 ;
}
but that didn't works , even i tried all methods to change it's css like
ion-select{
--placeholder-opacity: 1 !important;
}
ion-select{
--opacity: 1 !important;
}
ion-select{
opacity: 1 !important;
}
etc... but not works fine , event it color change very well using following code
ion-select{
color: var(--ion-color-secondary);
}
no change , it took default opacity <style> tag.
Any help would be appreciated
Edited
<ion-select class="contact-us-select" interface="alert" [interfaceOptions]="customPopoverOptions"
placeholder="selection" cancelText="cancel" okText="done" (ionChange)="onSelectChangevalue($event)">
<ion-select-option *ngFor="let item of Data" [value]="item.id">{{item?.title}}</ion-select-option>
</ion-select>
ion-select{
--placeholder-opacity: 1 !important;
color:black;
}
I'm afraid that's a bug of Ionic 4 (still happening in Ionic 4.4 as you can see in these github issues: 17446, 17166 and 17248).
Unfortunately, since you cannot access directly to the shadow DOM to change that value, there's no much we can do to fix the issue for now.
One of the users suggested using a label as a workaround (here) or even modifying a file from the node modules folder (here) but I guess a better workaround would be to preselect the first value by default. So for example if the options are Phone, Email, Live Chat, instead of showing the placeholder, you could preselect Phone by default until this bug is fixed in Ionic's core.
global.scss
ion-select{
opacity: 0.3 !important;
color: var(--ion-color-secondary);
}
that should work fine for changing global scss, you only need -- for changing scss variables defined in the component.
You should try this in css file:
.select-ios .select-placeholder{
color: #000;
font-size: 13px;
}
Go to this path:
[YOUR_PROJECT_PATH]/node_modules/#ionic/core/dist/esm
Look for this files:
ion-select_3-ios.entry.js
ion-select_3-md.entry.js
open it, and find:
.select-placeholder{color:currentColor;opacity:.33}
change it to what you want
I think the following code will help you, I tried on text box's placeholder, it works. For text box placeholder my code work, but for selection box I am not sure but, according to your code I think the following code may help you. Also, Run Code Snippet in which I code it for text box's placeholder.
select::placeholder {
opacity:0.5;
}
input::placeholder {
opacity:0.5;
}
<input type="text" placeholder="Input box">
I had same problem with ionic 4, this was my solution and works perfect
CSS
ion-select.industry-group:before{content:"Select industry"}
ion-select<your class>:before{
content: "Select Industry"
opacity: 1;
color: #00000
}
no placeholder in html
<ion-select class="industry-group" [formControl]="industryGroupFormControl" ok-text="Ok" cancel-text="Cancel">
I am trying to figure out the way to replace <input type='file' /> and make it's replacement accessible as the mentioned input itself.
Question is: Can I have it both ways, or is type='file' the key of the accesibility keys?
My approach:
I've basically told the browser to forget about type='file''s existence with CSS:
input[type=file] {
display: none;
visibility: hidden;
opacity: 0;
height: 0;
width: 0;
position: absolute;
top: -9999px;
}
Prepared it's replacement:
<input type='file' />
<label for="file">Upload your file</label>
<input type='text' id='file' />
Fixed OS' styles with some pretty CSS and added the JS (jQuery) code to handle the file browser displaying:
$("#file").on("focus", function(ev) {
$(this).siblings("[type='file']").first().focus();
});
And handled upload for the file input so it displays filenames and does other cool stuff browsers prevent.
Do I need to add some extra aria attributes to make it more descriptive? Should I, for example, prevent type='file' from being selected with tab by setting tabindex="-1", so the person-in-need-of-accessibility does not get confused while opening file browser two times in a row within short time period? Should I add an id='file-label' on my <label> element and aria-describbedby='file-label' on the type='file'? Or should I just give it all up and use the filthy standard type='file'?
There's no corresponding role in ARIA for the input[file] tag. You are using five different ways to hide the input[file] element (display:none, visibility: hidden, opacity:0, width=0;height=0 and offscreen positionning), that's way too much and putting a tabindex=-1 on a display:none element has no effect...
In my humble opinion, it would be better to replace the input[file] with a button as this button would trigger a click on the hidden input[file].
The input[text] would give a curious announcement on the screen reader.
Of course, it could be a good thing to modify the button text to specify the selected file after a selection has been done.
I need to style enabled checkbox to look like disabled, but style="background: #e4e4ee4;" doesn't work. Could someone help me? How to make checkbox to look like it has attribute disabled with css? (Case with usage attribute disable is forbidden).
You could set opacity instead of background.
Simple Example:
https://jsfiddle.net/gfb0gc3h/2/
<input type="checkbox" class="mycheckbox"/>
.mycheckbox
{
opacity:0.5;
}
As adopted from Nezure's answer, but don't forget to add the pointer-events property and set it to none to prevent clicks!
.disabled-checkbox {
opacity:0.5;
pointer-events: none;
}
Example: https://jsfiddle.net/gfb0gc3h/67/
I mean you can just disable it within the HTML code.....is that what you're trying to do?
I have a custom directive that I use to manage user access through my website. I use this to add a 'disabled="disabled"' attribute to html tags.
However, when I try to use this with tag-input, it doesn't work. I'm guess this is down to that fact that ngTagsInput uses it's own directive for tags-input.
I have read the documentation and cannot find a solution to what I am looking for.
Here is my code:
Html:
<div access-level="Admin">
<tags-input ng-model="tags" on-tag-added="addNewTag($tag)" on-tag-removed="removeTag($tag)">
<auto-complete source="loadTags($query)" min-length="0"></auto-complete>
</tags-input>
</div>
Is there any work around for this?
Thanks.
It's currently unsupported, but looks like will be in the next major version (2.3.0):
https://github.com/mbenford/ngTagsInput/issues/102
Edit:
2.3.0 is out; see following link for details https://github.com/mbenford/ngTagsInput/blob/master/CHANGELOG.md#features
I could not find this option in the release 2.3.0, but at least they have enabled the regular disabled attribute.
What I have done to hide the remove button and the "Add a tag" input box, was to add a couple of rules in the CSS.
tags-input[disabled] .remove-button {
display: none;
}
tags-input[disabled] input.input {
display: none;
}
Probably there is a better way to do it, this was the fastest I could find.
I have this a and I don't know that I need to insert into the "onmouseover" so that the cursor will change to finger pointer like a regular link:
<a class="menu_links" onclick="displayData(11,1,0,'A')" onmouseover=""> A </a>
I read somewhere that I need to put:
onmouseover="cursor: hand (a pointing hand)"
But it's not working for me.
Plus I'm not sure if this is considered JavaScript, CSS, or just plain HTML.
<a class="menu_links" onclick="displayData(11,1,0,'A')" onmouseover="" style="cursor: pointer;"> A </a>
It's css.
Or in a style sheet:
a.menu_links { cursor: pointer; }
You can do this in CSS:
a.menu_links {
cursor: pointer;
}
This is actually the default behavior for links. You must have either somehow overridden it elsewhere in your CSS, or there's no href attribute in there (it's missing from your example).
I like using this one if I only have one link on the page:
onMouseOver="this.style.cursor='pointer'"
in css write
a.menu_links:hover{ cursor:pointer}
Here is something cool if you want to go the extra mile with this. in the url, you can use a link or save an image png and use the path. for example:
url('assets/imgs/theGoods.png');
below is the code:
.cursor{
cursor:url(http://www.icon100.com/up/3772/128/425-hand-pointer.png), auto;
}
So this will only work under the size 128 X 128, any bigger and the image wont load. But you can practically use any image you want! This would be consider pure css3, and some html. all you got to do in html is
<div class='cursor'></div>
and only in that div, that cursor will show. So I usually add it to the body tag.
I think the "best answer" above, albeit programmatically accurate, does not actually answer the question posed. the question asks how to change the pointer in the mouseover event. I see posts about how one may have an error somewhere is not answering the question. In the accepted answer, the mouseover event is blank (onmouseover="") and the style option, instead, is included. Baffling why this was done.
There may be nothing wrong with the inquirer's link. consider the following html:
<a id=test_link onclick="alert('kinda neat);">Click ME!</a>
When a user mouse's over this link, the pointer will not change to a hand...instead, the pointer will behave like it's hovering over normal text. One might not want this...and so, the mouse pointer needs to be told to change.
the answer being sought for is this (which was posted by another):
<a id=test_link onclick="alert('Nice!');"
onmouseover="this.style.cursor='pointer';">Click ME!</a>
However, this is ... a nightmare if you have lots of these, or use this kind of thing all over the place and decide to make some kind of a change or run into a bug. better to make a CSS class for it:
a.lendhand {
cursor: pointer;
}
then:
<a class=lendhand onclick="alert('hand is lent!');">Click ME!</a>
there are many other ways which would be, arguably, better than this method. DIVs, BUTTONs, IMGs, etc might prove more useful. I see no harm in using <a>...</a>, though.
jarett.
Add an href attribute to make it a valid link & return false; in the event handler to prevent it from causing a navigation;
A
(Or make displayData() return false and ..="return displayData(..)
Solution via pure CSS
as mentioned in answer marked as the best
is not suitable for this situation.
The example in this topic does not have normal static href attribute,
it is calling of JS only, so it will not do anything without JS.
So it is good to switch on pointer with JS only.
So, solution
onMouseOver="this.style.cursor='pointer'"
as mentioned above (but I can not comment there) is the best one in this case.
(But yes, generaly, for normal links not demanding JS, it is better to work with pure CSS without JS.)
<! –– add this code in your class called menu_links -->
<style>
.menu_links{
cursor: pointer;
}
</style>
In the above code [cursor:pointer] is used to access the hand like cursor that appears when you hover over a link.
And if you use [cursor: default] it will show the usual arrow cursor that appears.
To know more about cursors and their appearance click the below link:
https://www.w3schools.com/cssref/pr_class_cursor.asp
div{cursor: pointer; color:blue}
p{cursor: text; color:red;}
<div> im Pointer cursor </div>
<p> im Txst cursor </p>