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.
Related
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.
Ayo,
I have built a contact form and every time I click on a specific input field to fill it out, it imitates a weird blue border around the input field.
I think the best way to present you the problem with code is if you visit my website - I don't know which of my 1k line in css triggers that so please take a look to the very bottom of the website https://www.adamsochorec.com/about/[ ](https://www.adamsochorec.com/about/)
I've tried to remove it by setting border: to none on :focus but that did not work and the effect isn't generally visible while I inspect the page. So I was wondering if it might be some browser preset or something? It is both on Brave and Safari browsers.
no outline before clicking in, outline after clicking in
EDIT: Outline: none worked!
It seems like an input, you can use:
input:focus{
outline: none;
}
You can replace input with textarea or anything else in your case.
I have a file upload element
<input type="file">
When I choose a file most browsers (i.e. Chrome and FF) display the image name. Safari however is showing a tiny thumbnail. Bad Safari!
My end goal, which is working everywhere except Safari, is to have a custom upload button using a psudo element. After selecting an image a tiny thumbnail shows up in the center of my button that I can't seem to get rid of.
To boil down the issue:
Safari:
Everyone else:
Goal after adding font-size: 0;:
To wrap it up here's the final product I'm trying to prevent:
Instead of setting the font-size to 0 you could try visibility: hidden;
I assume, that your "Select Image" button is not part of the input element, so it should still be displayed.
input[type="file"] {
visibility: hidden;
}
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.
i have a page which displays a border around the divs #call and #courses
i m using the css:
border: 3px solid #afd4a9;
this is not properly in ie
see it here
thanks
There's nothing wrong with your CSS.
When I disable JavaScript in Internet Explorer, the border is there (but not rounded).
Looking more closely, I see you're using jquery.corner.js for rounding the corners.
I'm not sure why that isn't working for you (I can't see what you're doing wrong), but I recommend switching to CSS3PIE instead for the rounded corners.
In short, you simply download the PIE.htc file, and add a single rule to your CSS for each element:
#myElement {
...
behavior: url(PIE.htc);
}
corners.js removes the borders in ie - see the inline styles for the relavent divs. To have borders in IE, you need to have an outer div wrapping the inner div and use corners on both divs to get a border like effect. Check out the demo page about half way down, under adjornments: Jquery corners demo page
The way corners works in ff and IE is totally different - it simply uses the built in mozilla css styles which keeps the border styling. In IE corners does div insertion.
The problem is that you have a bit of javascript adding a style attribute to your DIVs:
style="border-bottom: medium none; position: relative; border-left: medium none; zoom: 1; border-top: medium none; border-right: medium none;"
You'll have to selectively remove that code for IE, or fix how it works.
Note, you ought to install the Developer Tools for IE (or if you have IE 8, just press F12 to see if they come up). The tool will let you see the HTML code after javascript has run, and it is invaluable in troubleshooting these types of problems.
Your CSS is being overwritten by inline styles, it appears, by this function. $('#courses').corner(); in your index.js file, which is rounding its corners like it's supposed to.