Can we disable keyboard key (Ctrl+A/Ctrl+C) with CSS, so that nobody can use select all shortcut using keyboard in my website?
No, CSS cannot affect the browser's response to the keyboard. JavaScript can, but JavaScript can also be turned off.
In other words: you can't do that, and even if you do then you can't count on it.
Not with CSS, however it's possible using JavaScript if the browser doesn't have the feature disabled.
Try this css
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
(from an answer to this question)
Though the original question was about selecting text with the mouse, this css seems to disable the ctrl+a / ctrl+c capability as well (at least in a quick test on a sample project)
Might not exactly be the functionality you're looking for, but if it's a small number of elements where you want to exclude a user from focusing, you can go into the html and add tabindex="-1" on that element, which removes it from the keyboard focus list
<div tabindex="-1">element text</div>
and also use this css
.disable{
pointer-events:none;
background:#e9ecef;
}
Related
I’ve just come across a site using a CSS property -moz-user-select,
set to none, as an anti-user measure:
#content {
-moz-user-select:none;
-webkit-user-select:none;
-ms-user-select:none;
user-select:none
}
How can user-select be disabled completely in Firefox? I’m looking
for a permanent, unconditional and non-overridable solution like a
compile flag or a configuration setting that is guaranteed to be
effective. The expected behavior is that the browser treat all text
as selectable again, as if the property didn’t exist in the first place.
Try using this extension, which explicitly states a feature of "Add Custom JavaScript Codes or Styles (CSS) to an specific page or all pages."
If you add the following CSS to all pages, it should undo the effects, unless the dev (for some reason) used !important on one of their declarations.
* {
-webkit-user-select: unset;
-moz-user-select: unset;
-ms-user-select: unset;
user-select: unset;
}
You could naturally put in a better selector if any specific site is giving you trouble - just increase the specificity.
Full disclosure: I have never used the extension I linked, so I can't vouch for it. I'm just going off what it claims to do.
You can achieve this by adding a custom style in the browser. I use Stylus addon. It's a fork of chrome extension Stylish.
Install the addon
Click Manage
Write a new style
Add these lines in the code section
* {
-webkit-user-select: auto;
-moz-user-select: auto;
-ms-user-select: auto;
user-select: auto;
}
You don't have to add !important rule. The extension forces to apply the custom style by default.
Using contact forms 7 on my Wordpress site development and I noticed the buttons were different for mobile devices, so after searching I found the solution of -webkit-appearance: none; which I applied to the element input.wpcf7-form-control.wpcf7-submit.
The style has been applied because it shows up when I inspect the element, but nothing has changed on mobile devices.
Should I have applied it to a different element?
You should try this code instead :
input.wpcf7-form-control.wpcf7-submit {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
Consider adding !important if it still not working.
sorry for the super late answer.
The class seems to be correct indeed.
Temani's answer is also a good suggestion for wider browser compatibility.
However, sometimes, even being supported by browser like Safari, the use of the prefixed -webkit- has no effect.
So, I'm going to give you two answers:
For the case of a submit input -your case-, you can simply give the background and border properties you want and that will overwrite the browsers default css properties. No need of the appearance property. But you will probably need to define each status of the button including :active and :hover
For Check boxes and radio buttons a workaround to the problem is hiding the input with visibility: hidden and using :before and/or :after to create an alternative check or radio which will also need a visibility: visible property. You can use the :checked:before selector to apply different appearances to each status
Note: remember :before and :after associated to an input will only work in Chrome and Safari and only together with the property appearance: none
Hope this helps
I am trying to modify the cursor so it changes while I'm dragging (:active) the div/link.
However I don't understand what I'm doing wrong as the background property is working correctly.
div {cursor:crosshair;}
div:active {cursor:wait;}
a {cursor:crosshair;}
a:active {cursor:wait;}
As far as I understand, while the mouse is active (dragging) the :active properties should be applied. In this case, the background/color yellow property is being applied but the cursor property (wait) is not.
Fiddle
The cursor does change to wait but on drag the user-select property also come into action which changes cursor to text by default.
You can disable it by doing:
div, a {
-moz-user-select: -moz-all;
-webkit-user-select: all;
-ms-user-select: all;
user-select: all;
}
The w3c property is currently not implemented by major-browsers. So you have to use vendor prefixes. A downside, and a major one, to this solution is that you won't be able to select the content inside elements div and p anymore. Mostly its used to make buttons unselectable.
Demo
But its still not working on a. Probably some other thing overriding it. Maybe the HTTP request handler? I don't know, I'm just throwing stupid ideas now.
+user-select (W3C)
I want to disallow element selection using only CSS (selection either with the mouse or with CRTL+A). I tried the following:
element {
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
}
element::-moz-selection {
background: transparent;
}
and it does not work correctly in Firefox 20. It works in webkit though. I am able to select images and canvas with CTRL+A even with the above CSS rules.
Is there a way, using CSS only (without JS), to disallow the selection (or at least not show it).
I don't want to stop the user from copying text, I just want to hide the selection on some elements.
I tried the codes in this answer, but it does not seem to work in Firefox 20.
Thanks for your help.
I've tried it in FF20 with the following fiddle: http://jsfiddle.net/ADGsA/
p.noselect { -moz-user-select:none; }
p.recolor::-moz-selection { color: yellow; background: red; }
All behaviours with mouse are as expected, but I can indeed select the text with ctrl-A still. I'm pretty sure this is a bug in Gecko, but it's also quite possibly not one they're going to solve, judging by the MDN reference page:
Note: user-select is not currently part of any W3C CSS specification.
As such, there are minor differences between the browser
implementations. Be sure to test your application across browsers.
Non-standardized, so unpredictable. Take what you get and be lucky with it I guess, you might consider raising a bug on Bugzilla for it since I really think they didn't intend this, as the mentioned page also says:
Controls the appearance (only) of selection.
That would indicate that ctrl-A also should not be able to select it.
EDIT:
It's been a known issue since November 2008. Don't hold your breath for a fix, upvote it and pray.
I have a drop down box on a web page, using the HTML5 <select> tag. There are times where I want to make it "read only", that is display it as text only. For example:
Sometimes I want it to be "read/write":
And other times I want it to be "read only":
I would prefer not to use the "disable" attribute. I think it looks tacky, and implies that there is somehow a choice to the user when none is available.
Is it possible to transform the look of the current option for a select into normal text using CSS?
Yes, use the CSS:
select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
border: none;
/* needed for Firefox: */
overflow:hidden;
width: 120%;
}
example:
http://jsfiddle.net/eG3dS/
Because of the "needed for Firefox" section, you will need to make a div or span that constrains the select box size. It's too bad FF doesn't respect moz-appearance here.
Note that even though this makes it look like normal text, it is still a working select box! You will need to disable it some way, either by using the "disabled" attribute and changing the font color or otherwise.
In WebKit you can do it using -webkit-appearance: none;
select {
-webkit-appearance: none;
border: none;
}
Demo: http://jsfiddle.net/ThiefMaster/56Eu2/2/
To prevent the user from actually using the selectbox you need to disable it (disabled attribute).
Be warned that this is highly non-standard and does not work with -moz-appearance for example! Thebehavior of the -*-appearance property differs in various browsers and Mozilla even recommends not using it on websites at all:
Do not use this property on Web sites: not only is it non-standard, but its behavior change from one browser to another. Even the keyword none has not the same behavior on each form element on different browsers, and some doesn't support it at all.
I think the easiest thing would be to have a span next to your select, and use an event listener on the select to copy its text into the span, and toggle whether the select or the span is visible. It's a bit of Javascript but it will give you a lot of control.
You could create a custom drop down and have a disabled state, styled with CSS.
There is a really good jQuery plugin that you can set this up with: http://uniformjs.com/