I am using CSS 3.0 and it is complaining that the "user-select" property doesn't exist. Does anyone know what the appropriate substitute or replacement is?
user-select is back in the specification for CSS Basic User Interface Module Level 4. It is supported by most modern browsers (according to MDN), either prefixed or unprefixed.
#something {
user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
}
user-select was defined as part of User Interface for CSS3, which was later superseded by CSS3 Basic User Interface Module. However, the latter document does not include specification of user-select. After searching recently, I was unable to find any discussion on why it might have been removed from the spec.
See also: my answer on disabling text selection is not working in IE using jquery.
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 was goofing around with the ::placeholder pseudoelement on Codepen (Chrome 59.0.3071) when I noticed something odd. (please see my JSFiddle)
In brief, this CSS should not enable a transition of the ::placeholder color over 2s:
input::placeholder {color:red;transition:2s;}
input:hover::placeholder {color:green}
Using Firefox, there is no color transition over a 2 second interval on hover (this appears to be correct according to this section of a W3C spec and this section of a different one - follow the thread to the ::first-line pseudo-element), but instead there is an immediate color transition to green;
However, the same JSFiddle using Chrome does show a ::placeholder color transition over a period of 2 seconds, which according to the specs, appears to be incorrect.
Is this a bug in this version of Chrome (and if so, is it being addressed?) or is this an indictment of my lack of understanding of CSS?
Currently, it seems that Gecko's and Webkit's implementations are very
similar. The set of allowed rules are slightly different and the
default styling isn't the same but those are clearly solvable issues.
-- From http://lists.w3.org/Archives/Public/www-style/2013Jan/0283.html
Non-standard This feature is non-standard and is not on a standards
track. Do not use it on production sites facing the Web: it will not
work for every user. There may also be large incompatibilities between
implementations and the behavior may change in the future.
-- From https://developer.mozilla.org/en/docs/Web/CSS/::-moz-placeholder
Only the subset of CSS properties that apply to the ::first-line
pseudo-element can be used in a rule using ::placeholder in its
selector.
-- From https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder
But apparently both Chrome and Firefox apply no transitions for ::first-line, as is evident through this JSfiddle I made.
Also while I was searching on the net for answers, I found that the transition property for ::placeholder was working in an older version of Firefox with vendor prefixes which simply reconfirms the line from spec,
behaviour may change in the future.
Here's the code for the JSfiddle.
input::-webkit-input-placeholder {
color: red;
transition: 2s;
}
input:hover::-webkit-input-placeholder {
color: green
}
p::first-line {
color: red;
transition: 2s;
}
p:hover::first-line {
color: green
}
<input placeholder="Sup">
<br />
<p style="display:inline-block">This is the first line.</br> Check it out</p>
I couldn't find it in the w3c docs.
It looks like it used to work in some older Firefox versions.
A workaround with css could be:
input[placeholder]{color:red; transition:color 2.1s;}
input:focus[placeholder]{color:blue}
Which works in Chrome and Firefox.
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.
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;
}