I want to disable the options that popup on selection (copy, define...) on the IOS version of Safari, but keep the selection. -webkit-user-select: none; prevents from selection text, and -webkit-touch-callout: none; isn't doing the job either
Related
Basically I'm working on this site - www.docksteaderlending.ca
I am not a developer by any means but i have basic css and html knowledge.
Client wants a simple one page site, no other pages. But wants apply now button, email, and telephone number in top header. I achieved this by using custom links in the wordpress menu, and linking to mailto:xxx and tel:xxx
Client comes back, and says that he doesn't like that you can't highlight and copy the text (doesn't like that it automatically opens up a mail client).
What I'm trying to do is make the text selectable, which i managed to do by adding the following css:
.unclickable > a:hover {
pointer-events: none;
cursor: default;
}
It worked, although it messed up the cursor a bit. However, i realized the problem is mobile. The links aren't clickable, but you also can't select them on mobile either.
I've tried using user-select, but it doesn't seem to do anything. This is the code i used below:
.selectable p {
-webkit-user-select: all; /* Chrome all / Safari all */
-moz-user-select: all; /* Firefox all */
-ms-user-select: all; /* IE 10+ */
user-select: all; /* Likely future */
}
Ideally, what I would like to do is make the links both clickable and selectable, it seems like the simplest solution and allow the user to choose, while allowing for mobile functionality. But i've reached the end of my knowledge and google doesn;t seem to be helping.
Any help is appreciated. If you check the website, i've left the email address with the unclickable class, while the phone number has no additional css classes (except for the font awesome icon, but that is irrelevant)
I would probably suggest a media query so that the .unclickable class is only applied on devices above mobile browser width
#media (min-width: 768px){
.unclickable > a:hover {
pointer-events: none;
cursor: 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
How to remove the “clear field” X button when Browser Mode : IE9 Document Mode:IE9 on certain inputs.
I use this code
<STYLE type="text/css">
input[type=text]::-ms-clear{
display: none;
}
input[type=password]::-ms-reveal{
display: none;
}
</STYLE>
It's working fine when I choose browser mode like Browser Mode : IE9
and Document Mode:Standards and same as it is in (IE8,IE7).But it's not working for when I choose browser mode Browser Mode : IE9 and Document Mode:IE9 and same as it is in (IE8,IE7).
This only appears inside IE10+ when you emulate older modes; you can't disable it using the CSS property as it's only defined in IE10+ mode.
Dupe of
IE 10's -ms-clear pseudo-element, and IE5 quirks mode
Remove IE 10 Clear Button From Input Field
http://answers.microsoft.com/en-us/ie/forum/ie10-windows_7/how-can-input-clear-button-be-hidden-if-ie10-is/8f55602f-1a6b-452d-8cb3-e4cc6034b138
https://stackoverflow.com/a/15227216/126229
How can I disable the clear button that IE10 inserts into textboxes?
I set the cursor as follow:
cursor: url(https://my.server.com/resources/cursors/cursor_select.cur), crosshair;
It works on all browsers, except Safari.
What might be the solution?
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;
}