I want users to be able to copy-paste a block of text without also getting inline controls, like buttons.
In Chrome, applying user-select: none; to the controls accomplishes this. If the user selects the whole paragraph, the buttons are excluded from the selection, and copying gives you only the content.
In Safari, using -webkit-user-select: none;, the selection visually shows that the buttons aren’t selected, but copy-pasting still includes their content.
Here’s a demo. The goal is that selecting everything then copying gets “13”, not “123”.
button {
-webkit-user-select: none;
user-select: none;
}
1<button>2</button>3
Also doesn’t work: putting the content in a shadow DOM.
Probably works, but I’m hoping for better: make the text an SVG, or contort the DOM so the buttons are inline only visually, not in the DOM.
One workaround is using ::before or ::after. With a little CSS, you can keep content edits inline, too.
button::after {
content: attr(data-content);
}
1<button data-content="2"></button>3
This has the major limitation of not supporting a full DOM tree, just text or an image.
I don’t know if this works with screen readers.
Related
How can I remove the small square arround the radio button that gets displayed when the input gets focused?
I'm pretty sure this is a duplicate, but I don't know what the square is actually called and couldn't find what I'm looking for.
I tried autocomplete="off" on the input. I played arround with jQuery's preventDefault but without success.
Update:
Thanks for your responses. If anyone comes accross this question, here is the effect of appearance attached (upper pic without appearance, the one below is with appearance) with Firefox:
Just in case someone comes to the same problem.
Update with Chrome / Safari, appearance removes the input
-webkit-appearance: none; would make the radio buttons disappear in
Chrome and Safari. check jsfiddle.net/8uY6H (with Chrome)
– noted by JFK 6
Try this CSS since it is an outline:
input[type="radio"]:focus {
outline:none;
}
Try outline:0 property for the radio button on focus
input[type="radio"]:focus{
outline:0;
}
You need to set:
outline:none;
On the :focus state of the CSS class relating to the checkbox, or directly e.g.
input[type="radio"]:focus{
outline:none;
}
The crucial part is setting outline
The CSS outline property is a shorthand property for setting one or
more of the individual outline properties outline-style, outline-width
and outline-color in a single rule. In most cases the use of this
shortcut is preferable and more convenient.
However, also setting appearance may help cross platform where different browsers render checkbox elements differently.
As noted in the comments below though, this will cause the checkbox to not display in some circumstances- so you would need to produce a pure CSS solution.
The -moz-appearance CSS property is used in Gecko (Firefox) to display
an element using a platform-native styling based on the operating
system's theme.
This property is frequently used in XUL stylesheets to design custom
widgets with platform-appropriate styling. It is also used in the XBL
implementations of the widgets that ship with the Mozilla platform.
As simple as
input[type="radio"] {
outline: 0 none;
}
JSFIDDLE
I have styled my select boxes, but i can still see the arrow in my select box in firefox, i have set css so:
background:transparent;
content:'';
apperiance:none;
Thats work on Chrome, but on Firefox i still see default arrow, is possible to delete it also on Firefox?
This should remove the arrow in selects in Chrome, Firefox, Safari, and IE10.
.poa-select {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
text-indent: .01px;
text-overflow: "";
}
.poa-select::-ms-expand {
display: none;
}
Ideas taken from here and here.
Unfortunately there isn't yet a cross-browser compatible route of styling form elements with CSS: it's not usually left to the designer to have control over their appearance/behaviour so form elements are notoriously difficult to style. Many browsers specifically do not allow you to style them at all!
If you need to get a consistent look across all browsers, the only route is to use JavaScript to replace the form element in-view with stylised HTML elements.
Here's an article that lists a few of the options available for you: http://www.jquery4u.com/plugins/10-jquery-selectboxdrop-down-plugins/
The trick that works for me is to make select width more than 100% and apply overflow:hidden
select {
overflow:hidden;
width: 120%;
}
The answer from here : How to remove the arrow from a tag in Firefox
Use the pointer-events property.
The idea here is to overlay an element over the native drop down arrow (to create our custom one) and then disallow pointer events on it. [see this post]
Here is a working FIDDLE using this method.
Also, in this SO answer I discussed this and another method in greater detail.
If I have a div with the style overflow: hidden; I found that there are times when keyboard actions can cause the div to scroll anyway. And since there are no scrollbars, there is really no way to make the div go back to its original state. Is anything I should do in addition to specifying the style to prevent this?
For example when you select the L with the mouse (in the fiddle) and after that you press the down arrow key while holding down shift (i.e. expanding the selection).
http://jsfiddle.net/PeeHaa/H34mM/
Or another scenario is when there is a textarea in the div: http://jsfiddle.net/h6Bhb/1/
A simple solution would be to disable text-select in the relevant element. Therefor preventing the possibility to use the arrow keys to select more..
To prevent tekst select you need to event.preventDefault() in the mousedown event with JS.
For your fiddle that could look like this in modern standards compliant browsers:
// give the div an id
document.getElementById('div').addEventListener('mousedown', function(e) {
e.preventDefault();
}, false);
Edit
Or as #JimThomas pointed out in the comments you can disable text select using CSS, ofcourse this doesn't enjoy as much support as the JS solution.
How to disable text selection highlighting using CSS?
I couldn't think of a more graceful or more complete (this doesn't solve problems you might have with inputs) solution, and I'm not sure if there even is one...
Add this to your div CSS:
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none; /* IE10+ */
user-select: none;
Does not work in < IE10 or Textarea, but I don't believe anything will prevent the textarea scenario unless you disable the textarea itself to prevent selection.
... or go with JS solution.
I am using :after to add asterisks to labels that are required:
.field-name
{
color: #444;
font-family: verdana;
font-size: 0.85em;
line-height: 2em;
}
.field-name.required:after
{
content: '*';
color: #ff0000;
}
This works great when the content is not inside of a jQuery dialog. However, when using a jQuery dialog, the asterisks are only shown when the dialog is hovered-over. See this jsFiddle for an an example in IE8. Click the button and then move the mouse over the actual dialog window. In all other modern browsers, this works as expected. Is this a known bug?
Don't use CSS to add the star. Use javascript's method to add text to the end of a Dom element. CSS is not content, it's meant for styling the content.
These asterisks won't be read by screen readers when added through the CSS property content (except VoiceOver, maybe), even though it's an important information that is being conveyed.
You should add them server-side: everybody will see them, with or without running scripts. You should also add at the beginning of your form a sentence like 'Fields marked with a * are required', because not everybody knows what these stars mean.
We know IE8 has issues rendering generated content. The z-index isn't being set properly. I suggest setting a higher z-index on the parent element as mentioned here. It's possible the jQuery UI dialog's changing the positioning attribute when you hover over it. Unfortunately, I can't really test this as I'm not running IE8 here but I hope this helps.
I'm styling a print css file to nicely print out a web page with several input elements. All looks good when printed from PC browsers but when I look at chrome on Mac a select element prints out with the rounded corners and select arrows in black (see img)
(source: onexamination.com)
css on this is
input, select {
border: none;
overflow: visible;
background: none;
}
How do you get rid of the background things - dont even know what to call them, are they images !?
Managed to find a solution to this...
-webkit-appearance: none;
This seems to remove all rendering on the element and leave it just as the selected text when printed out.