I am trying to style the Textarea's resizer in the dark mode of my website so that it is not a white block in an otherwise dark website. As such, I tried to both use ::-webkit-scrollbar-corner and ::-webkit-resizer, although the first one leaves white corners (see screenshot), while the other one removes the characteristic two lines from the resizer. I know these changes will affect only Webkit and Blink based browsers, thus not IE, older versions of Edge and Firefox. Is there a way I can style ::-webkit-scrollbar-corner to avoid having those white corners? I want to avoid adding custom wrappers with custom scrollbars as much as I can, as it would take me way longer and add unnecessary complexity.
Here is a minimal example to reproduce the issue:
::-webkit-scrollbar-corner {
background-color: red;
}
::-webkit-scrollbar {
background-color: green;
}
textarea {
background-color: black;
color: white;
}
<textarea>
Hello
World
</textarea>
Update: To clarify, I still need the textareas to be resizable, I want to know if there is a way to remove the white top and left borders from the resizer without styling ::-webkit-resizer which would mean using an SVG to have the two lines typical of the resizer, as in the image.
It's because the textarea can be resized, so the bottom right corner is resizing box.
You can remove it by setting the resize property of textarea as none;`
I think you can do like this.
::-webkit-scrollbar-corner {
background-color: red;
}
::-webkit-scrollbar {
background-color: green;
}
::-webkit-scrollbar-thumb {
background-color: #002200;
border-radius: 20px;
border: 3px solid transparent;
background-clip: padding-box;
}
textarea {
background-color: black;
color: white;
resize: none;
width: 100%;
height: 100px;
}
<textarea>
Hello
World
</textarea>
I'm new to coding and only have basic knowledge of HTML and CSS. I'm currently trying to modify my Tumblr I made to display my artwork using custom HTML and CSS and I'm having an issue with my phone not displaying my PNG's transparencies correctly. I've been looking for awhile now and haven't seen a question like this.
Here's the link to my Tumblr: https://usercolby.com/
If you look at the posts on a desktop, the transparencies act fine. But if you visit my link on a phone, the posts with transparencies have white backgrounds. I don't know if this is a PNG issue or some kind of div with a white bg that's only visible on mobile.
See comparison here
Also this is the custom CSS I used to get rid of the white post background on Desktop:
.post-wrapper {
**background: transparent;**
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
overflow: hidden;
padding: 0;
position: relative;
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #eee;
border: transparent;
}
The white bg on mobile seems to be coming from some other div than this one and I've tried finding every other div that surrounds the images and adding background: transparent; or background: none; but nothing seems to work.
This is my first post on stackoverflow so I don't know if what I've provided is enough information, please let me know if you need anything else.
Thanks a lot
You've got:
#media screen and (max-device-width: 568px)
.photo figure img {
/* background: #fff; */
width: 100%;
}
Which sets the background color to white for screens narrower than 568px. I removed that in console and it fixed it.
Fixed it like 10 minutes after posting this question -_-
I randomly found another element when inspecting a post
.photo .high-res img {
width: 100%;
}
Changed it to
.photo .high-res img {
background: none;
width: 100%;
}
Somehow this worked?
Thanks a lot to those who answered
I'm using SVG files as backgrounds for my HTML elements. It works fine in all major browsers. The problem is my site needs to also work and look correctly in Internet Explorer 9. In IE9 the SVG backgrounds are always "moved" to the right and cut, like below:
The element above is a close link of a modal. Structure and styles of the close link:
HTML
CSS
.aq-modal-close {
display: block;
width: 12px;
height: 12px;
background: url('../img/modal_close.svg') no-repeat 0 0 scroll;
background-size: 12px 12px;
float: right;
margin-top: 5px;
}
The SVG file is bigger than it should, so I use background-size to adjust it. Other SVGs are used the same way. Any ideas what might be wrong? Again, this happens only in IE9.
You can add a background-position with negative values:
DEMO
.close {
display: block;
width: 52px;
height: 52px;
background: url('image.svg') no-repeat 0 0 scroll;
background-size: 52px;
background-position: -10px 0px;
border: 1px solid black;
}
As #zeidanbm stated in the comment above, the answer to the problem was in an old post: Background-size with SVG squished in IE9-10.
Basically, the designer followed the instructions and the SVGs are displayed correctly now in IE9, as background images.
I have always used the "trick":
select {
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
}
to do custom select boxes on FF but since version 30 is released this stopped working completely. I have tried to find if this was deprecated but couldn't find anything. Is there a workaround, or another method to replace this?
Update
As of January 2015, this now works again with the release of Firefox 35. See the answer below for historical reference.
Background
The hack that was used is this:
select {
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
}
In my testing, on FF 29, -moz-appearance:none; had no affect. What caused the arrow box to not appear was the second two lines. It said that any overflow is to be replaced by an empty string, and then it used text-indent to cause the select to overflow. Since the arrow box is rendered as a single element, similar to a single letter, this caused it to be replaced by the empty string.
What Happened
Someone at Mozilla noticed that if you have padding on a dropdown select, the arrow doesn't change size. According to the bug report, this issue has now been fixed:
The problem is that this has divorced the arrow from normal CSS rules. I've tried padding, text-indent, margin, white-space, text-wrap, and a few more, and I can't find anything that will affect it. Elsewhere around the internet, people are saying the same thing, unfortunately.
What Now
We have a few options. You can use an overlay combined with pointer-events:none to style the dropdown however you want: Tutorial
You can create a completely separate dropdown to replace select, using Javascript: Tutorial
We can also watch the request on Firefox's Bugzilla, and hope that someday they will create a non-hacky way to do this. PLEASE NOTE: Don't go there and start posting comments about wanting it. Part of the reason it's been so delayed is that people threw a fit. It may help to vote for the issue.
Update Sept. 2014
This is now being actively worked on for Firefox. 2 patches have been submitted and have been awaiting review for a week. Most probably scenario is that this makes it into FF35 Aurora, and we have a few weeks for it to get reviewed and approved before the cutoff date (Firefox operates on a 6 week release schedule). It could also be delayed, and it could even theoretically be "uplifted", meaning patched in the current Aurora and Beta versions, to get released sooner.
Update Oct. 2014
This how now been officially resolved! Kind of. A patch to allow users to hide the dropdown arrow element has been committed and will be shipped with Firefox 35 in January 2015.
This will only allow users to hide the arrow. To style it is another issue, which has been spun off into another bug ticket which will be considered in the future.
Update Jan. 2015
This has now been fixed! Firefox 35 came out on January 13, and you can now use -moz-appearance:none to remove the arrow.
Yes ! Is good ! Thks
JS FIDDLE
.customSelect {
font-size: inherit;
margin: 0;
padding: 0.5em;
background-color: transparent;
color: #393939;
opacity:1;
-moz-appearance: none;
border: 0 none;
border-radius: 0px;
border:1px solid #B1B2B3;
padding-right: 2.5em;
}
.SelectBox select {
background: transparent;
width: 182px;
padding-right: 29px;
font-size: 100%;
text-indent: 0.01px;
text-overflow: "";
border: none;
height: 17.5px;
-webkit-appearance: none;
-moz-appearance: none;
}
.SelectBox {
width: 154px;
height: 15.8px;
overflow: hidden;
background: url("Images/Arrow.png") no-repeat 141px center #ffffff;
border-radius:2px;
border: 1px solid #B90F22;
}
<div class="SelectBox">
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
This seems to work fine in every major browser but IE. IE is falling back to the default dropdown so that shouldn't be too much of a problem.
The response provide by Mozilla Firefox to this issue is just unacceptable. The browser is broken and is nothing more than an open sore for malicious code. They promote the V29-30 browser as a security update, but it took over a week since the release date for a notification to appear for V30.
My own response will be to do nothing and I encourage all other developers to do the same. Eventually users will get tired of the design inconsistencies and abandon Mozilla Firefox like they have been in even greater numbers.
If a reasonable support request is meet with sheer contempt and other browsers can do it but Mozilla Firefox no longer can. It’s not me that has to fix my code, but Mozilla Firefox has to fix theirs!
You can use this solution for firefox, using vendor pseudo class :-moz-any() and pointer events only for mozilla and do not affect other browsers, because both is valid since version 3.6.
here is a jsbin example
http://jsbin.com/pozomu/4/edit
Although it's a quite dirty hack, you can fix this by adding another overlay element above the arrow down in the CSS of your select wrapper (in my case .form-control-select):
/* The arrow */
.form-control-select:after {
content: "\f078";
z-index: 3;
pointer-events: none;
position: absolute;
right: 10px;
top: 9px;
padding: 6px 7px;
font-size: 10px;
}
/* the white overlay to hide Firefox' arrow */
.form-control-select:before {
position: absolute;
right: 1px;
top: 2px;
bottom: 1px;
width: 20px;
background: #fff;
content: "";
z-index: 2;
border: 1px solid transparent;
border-bottom-right-radius: 3px;
border-top-right-radius: 1px;
pointer-events: none;
}
My HTML:
<div class="form-control-select">
<select class="form-control">
<option value="1">one</option>
<option value="2">two</option>
</select>
</div>
I fixed my this issue by giving some style to div and select individually.
Anyone can change his width and other style properties a/c to needs. :)
Here is the js fiddle for it. JSFIDDLE
tested on all the browsers.
select::-ms-expand for IE and -webkit-user-select: none for chrome.
<div class="common-dropdown-small-div" style="width: 220px">
<select id="select" class="common-dropdown-project-select">
<option>
apple
</option>
<option>
blackberry
</option>
<option>
pumpkin
</option>
</select>
</div>
.common-dropdown-small-div{
border: 1px solid rgb(208, 208, 208);
border-radius: 5px !important;
overflow: hidden;
}
.common-dropdown-project-select{
width: 100% !important;
background-image: url("http://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png");
background-position: 97% 60%, 0 0 ! important;
background-repeat: no-repeat;
background-size: 25px 16px;
border: none ! important;
outline : medium none !important;
display: inline-flex !important;
height: 33px !important;
vertical-align: top;
-webkit-appearance: none;
}
select::-ms-expand {
display: none;
}
One option is to wrap the select elements in container elements with overflow: hidden. Increase the width of the select elements to push the down arrow to the right and out of the picture. Then add a border to the container elements that matches the select elements.
.select-container {
overflow: hidden;
display: inline-block;
height: 33px;
border-right: 1px solid #B3B6BD;
}
.select-container select {
width: 113%;
}
The problem is that that this will affect styles set on focus or validation errors, which is why I ended up doing what totas suggested and covering the arrows with pseudo-elements.
I have anchor element with CSS class.
All browser show the BG-image well, except IE 7 (it won't show the image at all). (I added the _attributes since I saw thats what is used in other sites).
When using IE Developr tools in IE7 it says background-image: none... Thanks
color: #FFFFFF;
cursor: pointer;
height: 102px;
left: 0;
margin-left: -7px;
position: fixed;
text-indent: -9999px;
top: 25%;
width: 35px;
z-index: 9998;
background-color: #279cff;
border-color: #279cff;
border-style: outset outset outset none;
border-width: 1px 1px 1px medium;
background-repeat: no-repeat;
height:170px;
background-image: url(../images/1.png);
background-position: 11px;
If the background has alpha transparency you won't be able to see that in IE6 properly because it doesn't render PNGs well. Either switch to gifs OR stop supporting ie6 :P
The underscore is a hack for CSS attribute to work only on 6, don't use it but use different CSS for IE.
IE6 doesn't handle very well with png. try to use jpg and it will probably work.
If not, try to float or display: block the element to see if it shows the background.
If your starting with _property it is for IE6 hacking. It will work only IE6. For IE6 use _property for IE7 use #property