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?
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 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 an anchor link that I want to disable once the user clicks on it. Or, remove the anchor tag from around the text, but definitely keep the text.
<a href='' id='ThisLink'>some text</a>
I can do this easily with a button by adding .attr("disabled", "disabled");
I successfully added the disabled property, but the link was still clickable.
I don't really care if the text is underlined or not.
Any clue?
When you click on the wrong musician, it should just add "Wrong" and then become unclickable.
When you click and you are correct, it should add "Awesome" and then disable all <a> tags.
The cleanest method would be to add a class with pointer-events:none when you want to disable a click. It would function like a normal label.
.disableClick{
pointer-events: none;
}
<a href='javascript:void(0);'>some text</a>
Use pointer-events CSS style. (as Jason MacDonald suggested)
See MDN https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events.
Its supported in most browsers.
Simple adding "disabled" attribute to anchor will do the job if you have global CSS rule like following:
a[disabled], a[disabled]:hover {
pointer-events: none;
color: #e1e1e1;
}
I just realized what you were asking for(I hope). Here's an ugly solution
var preventClick = false;
$('#ThisLink').click(function(e) {
$(this)
.css('cursor', 'default')
.css('text-decoration', 'none')
if (!preventClick) {
$(this).html($(this).html() + ' lalala');
}
preventClick = true;
return false;
});
$('a').removeAttr('href')
or
$('a').click(function(){ return false})
It depends on situation
Bootstrap provide us with .disabled class. Please use it.
But .disabled class only works when the 'a' tag already has class 'btn'. It doesn' t work on any old 'a' tag. The btn class may not be appropriate in some context as it has style connotations. Under the covers, the .disabled class sets pointer-events to none, so you can make CSS to do the same thing as Saroj Aryal and Vitrilo have sugested. (Thank you, Les Nightingill for this advice).
Add a css class:
.disable_a_href{
pointer-events: none;
}
Add this jquery:
$("#ThisLink").addClass("disable_a_href");
The best way is to prevent the default action. In the case of anchor tag, the default behavior is redirecting to href specified address.
So following javascript works best in the situation:
$('#ThisLink').click(function(e)
{
e.preventDefault();
});
You could use the onclick event to disable the click action:
<a href='' id='ThisLink' onclick='return false'>some text</a>
Or you could just use something other than an <a> tag.
Just remove the href attribute from the anchor tag.
Jason MacDonald comments worked for me, tested in Chrome, Mozila and IE.
Added gray color to show disable effect.
.disable_a_href{
pointer-events: none;
**color:#c0c0c0 !important;**
}
Jquery was selecting only first element in the anchor list, added meta character (*) to select and disable all element with id #ThisLink.
$("#ThisLink*").addClass("disable_a_href");
Write this a single line of jQuery Code
$('.hyperlink').css('pointer-events','none');
if you want to write in css file
.hyperlink{
pointer-events: none;
}
Create following class in style sheet :
.ThisLink{
pointer-events: none;
cursor: default;
}
Add this class to you link dynamically as follow.
<a href='' id='elemID'>some text</a>
// or using jquery
<script>
$('#elemID').addClass('ThisLink');
</script>
This is the method I used to disable.Hope it helps.
$("#ThisLink").attr("href","javascript:;");
Try this:
$('a').contents().unwrap();
Simply in SASS:
.some_class{
// styles...
&.active {
pointer-events:none;
}
}
Never trust the browser because the user can change the page in any way without the server's knowledge.
If a link is to work only once, the first thing you need to do is make sure that server side the click is accepted only once (with an onetime token specified as querystring for example), because the URL present in the href attribute can be copied by the user and inserted in the navigation bar of the browser and runned multiple times.
On the javascript side, the safest thing you can do is completely replace the <a> link with another tag, preserving the content:
/** Replace element, preserving attributes and moving descendant nodes from the previous one.
*
* #param {HTMLElement} element Element to be replaced changing tag.
* #param {String} new_tag New element tag.
* #return {HTMLElement} New created element.
*/
function rename_element_tag(element, new_tag) {
let new_block = document.createElement(new_tag);
for (let j = 0; j < element.attributes.length; ++j)
new_block.setAttribute(element.attributes[j].name, element.attributes[j].value);
$(new_block).insertAfter(element);
while (element.childNodes.length > 0)
new_block.appendChild(element.childNodes[0]);
$(element).remove();
return new_block;
}
This function replaces the passed element in place by "modifying" the tag, and preserves attributes and content by iterating all child nodes via vanilla javascript instead of jQuery to handle text nodes as well.
In your case you must skip the href attribute.
$('#ThisLink').one('click',function(){
$(this).bind('click',function(){
return false;
});
});
This would be another way to do this, the handler with return false, which will disable the link, will be added after one click.
The easyest way
In your html:
<a id="foo" disabled="true">xxxxx<a>
In your js:
$('#foo').attr("disabled", false);
If you use it as attribute works perfectly
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 />
I have looked all over and can't figure this out: how do you target the disabled state submit button in css?
For example: How would I target and style this button:
<input value="Validate" disabled="disabled" type="submit"/>
CSS3 adds the :disabled pseudoclass, which exactly does what you want.
input:disabled {
/*Disabled styles for input elements here*/
}
As this page shows all major browsers (except IE8) support this tag, so it seems unusable yet (unless you do not need IE support)
You can use:
input[disabled=disabled][type=submit] {
background:green;
}
Works on Firefox and is reportedly good on all but IE6. But I haven't personally tested this kind of combo selector.
PS: A more robust, cross-browser method, using jQuery...
$("input[disabled=disabled][type=submit]").css
({
'background': 'yellow',
'color': 'blue'
});
input[disabled='disabled'][type='submit']
{
...
}
doesn't work in IE 6 but should in all other browsers. Reference
There is also the :disabled pseudo-class but that's not supported in IE at all.
Styling disabled elements is difficult, as they sometimes have properties that can't be overridden. This article shows what stylings apply in which browsers: Styling disabled form controls with CSS
There is no pseudo class defined in CSS for a disabled state.
My guess is to use JQuery to change the CSS class for the disabled buttons.
Code for JQuery:
<script language="javascript">
$('input[type=button]').each(function () {
if ($(this).attr('disabled') == true)
{
$(this).addClass('disabled');
}
});
</script>
Add a style element 'disabled'.
One way I can think of for this is by setting the class of the button to disabled and then using "input.disabled" to specify the appropriate CSS. Would that work in the context you are doing this?
For your exact syntax, #Brock Adam or #Pekka's answer should work, but usually, the syntax for disabled input or button is:
<input disabled type="submit"/>
With this, you could do the following to target the disabled property:
button:[disabled] {}
input:[disabled] {}
Also, because it was what I needed in my case, below can help achieve the reverse (targeting only buttons or inputs that aren't disabled):
button:not([disabled]) {}
input:not([disabled]) {}