I have an HTML element textarea with defined CSS rule { resize: both }. In FF when the user mouse over the right bottom corner of textarea the cursor changed according to value of property resize, but in Chrome cursor doesn't change.
Please open this example in FF and Chrome to check the difference.
Is it a bug of Google Chrome and can I fix it with CSS on my side?
Update
I reported bug to Chromium:
https://bugs.chromium.org/p/chromium/issues/detail?id=942017
Update 2
The bug was fixed in Chrome 80.
Actually, there are, or at least were ways in which you could style the resizer and add cursor: se-resize; on hover. Check out this post: Can I style the resize grabber of textarea?
It describes how you can use ::-webkit-resizer to style the resizer:
::-webkit-resizer {
border: 2px solid black;
background: red;
box-shadow: 0 0 5px 5px blue;
outline: 2px solid yellow;
}
Unfortunately it stopped working in Chrome and I couldn't anything similar. (I think it still works in Safari).
But fear not, it's not hard to make a custom handle. Actually, I would encourage you to use a custom one as the default one is too small and hard to hit. Especially with touch. There are actually a lot of sites that use custom handles (or at least automatic resizers based which grows based on the content. Works great on touch too!).
Ie. Stackoverflow uses a custom handle (TextAreaResizer):
GIF of Stackoverflows resize handle
There are also lots of libraries for exactly that purpose, just do a Google search, and you'll find something that works for you :)
This is rendered by browser itself cant be designed using css
I'm having an issue with the select drop down button in twitter bootstrap. It's happening in the two browsers I have installed on the machine (IE11, Chrome) and it's not just restricted to 'my sites'.
Here is a screenshot of the bootstrap website (OS: Windows 8.1 Broswer: Chrome) (http://getbootstrap.com/css/#forms-controls):
I have checked the console window and all resources are loading correctly.
Could anyone help me with why this is happening / steps to resolve?
TL;DR: you can't use CSS to change the icon. You'll have to use a library that implements a select-like control using HTML and JavaScript (at the expense of mobile-friendly selects on iOS and Android).
The icon displayed in <select> is determined by the user's browser or operating system. You can't change it using CSS.
Select display in Chrome on a Mac:
Select display in Chrome on a Mac with some styles removed:
I removed line-height, background-color, border, border-radius, and box-shadow. Note that the arrow has changed even though I didn't change any related style.
Select display in Chrome on Windows:
Notice that the icons are different, even though the code is the same.
Now what?
Although select isn'g very styleable, there are many libraries that provide a very customizable implementation of a select-like control. I like to use Bootstrap-select.
This library creates a <div class="caret"></div> that can be styled to change the icon. For example after including the Bootstrap-select JavaScript, the following code:
HTML
<select class="selectpicker">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
CSS
.caret{
color: red;
}
Gives me this display:
You'll lose mobile display, though:
Using a custom library will disable the mobile-friendly way iOS and Android implement selects, so make sure a custom icon is important enough to you before proceeding.
I found a solution to this, add this CSS and put 'form-override' class on each select dropdown:
.form-override {
appearance: auto !important;
}
I'm not sure why this works or why it's needed, just wanted to share how I was able to fix this problem. For me it seems to be sporadic, sometimes the problem occurs and I need this style setting to fix it, and sometimes it does not need this fix.
Use for select
select {
-moz-appearance: none;
background: rgba(0, 0, 0, 0) url("../images/dropdown.png") no-repeat scroll 100% center / 20px 13px !important;
border: 1px solid #ccc;
overflow: hidden;
padding: 6px 20px 6px 6px !important;
width: auto;
}
You can't style the <select> element itself at this moment. Every browser applies its own styling to most form elements.
So you can create your own custom select by hiding the original one, create markup, e.g. div with ul + li and live it up with javascript.
OR
If you don't mind using jQuery, try these libraries:
SelectBoxIt
Select2
Chosen
Bootstrap select
jquery-selectBox
jQuery UI
I have experienced that behavior with IE on Windows 8.1. For some reason IE renders the arrow differently as soon as you start to style the select element (which bootstrap themes usually do). Even something as simple as setting the background color triggers this behavior.
The only solution I've found so far is to style the arrow as needed. You can use the ::-ms-expand pseudo element for that. The following css rule should restore the "default" look:
select::-ms-expand {
background-color: #fff;
border: none;
}
Wondering if anyone can help with an IE8 issue, I've searched high and low and tried many different things. On a WordPress site for a client, an input text box appears much smaller than it should, and off to the side of the page, as compared with all other browsers I've tested.
You can see a grab of how the page looks on IE8 (on Windows 7) here:
http://perfectitaliano3.fonterra.safecom.com.au/wp-content/uploads/grab2.jpg
If you compare that to the page http://perfectitaliano3.fonterra.safecom.com.au/recipe/potato-rosemary-and-speck-pizza/ in a modern browser you’ll see the width and placement of the search box and filter dropdown menu at the top right is all messed up.
I'm a bit a noob at IE8 issues, but I’ve tried changing the css, patching it with modern.js, html5 shiv, modernizr, all sorts of things, but nothing makes any difference!
If you have any suggestions please let me know, thanks.
Try this
#top #s{
height: 40px;
padding: 0px 47px 0px 5px;
}
Thanks so much for answering #Jenti. I tried your suggestion but it didn't seem to work, although because it's now live I tried it in the developer tools in a virtual machine version of IE8, so one can never be sure ;)
However I've since found a solution, I added the following:
#searchform > div {
width: 500px;
}
#s {
display: table-cell !important;
}
and that seemed to do it. Thanks again and appreciate it.
Tapping a <select> element on most mobile browsers brings up a touch-friendly menu of options to choose from instead of the pointer-friendly dropdown you typically see on desktop/laptop browsers. This would make <select> ideal to use as navigation menus instead the often-implemented <ul> dropdowns. The problem is, no amount of CSS can produce a totally customized looking <select> on a desktop browser.
Is it possible to achieve the same behavior as a <select> element a on mobile browser using a <ul> dropdown without too much hackiness?
If not, how would one go about proposing some solution to this problem to a standards body?
You could possibly do the following:
Detect mobile device (based on size, using WURFL, or other tools). If mobile device, hide the standard ul dropdowns, change to selects. If you don't like the look of the selects, you can do something like this:
select {
-webkit-appearance: none;
background: url(some_nav_image.png) #ddd;
}
jsfiddle example: http://jsfiddle.net/h9UyZ/
To be quite honest, if styled correctly, these could even just be used for the main website as well as the mobile, and work nicely in all cases.
How can I hide the div without using display:none or JavaScript?
In my country, a lot of Blackberrys come with the CSS support disabled (the mobile companies here are not so good to developers). I have text that says
<div class="BBwarn">
please activate your css support and a link
</div>
I want to hide that once the user activates CSS support, but i can't use display:none; because it is only supported in BB firmware 4.6. It is a public site and I can't make all my visitors upgrade.
Does anybody knows a solution to this? I hope the question is easier to understand now.
Update:
Thank you all for the answers but I can't use
position:absolute
overflow
because they are available from Blackberry firmware 4.6 and up
things to try:
use the z-index to put it behind some other element
move it off the screen by absolute positioning
visbility: hidden
make the content "invisible" by setting background to foreground color (works only for text)
opacity: 0
but the real question is: why?
This is a common way:
margin-left: -9999;
How about:
visibility: hidden;
That should hide the DIV, (note how it will still be rendered but be invisible, that means it will take space in the document as if it was visible, but be invisible (unlike display:none; where the div will not be rendered)).
<div style="height:0;width:0;overflow:hidden;">
<!-- content here -->
</div>
Incidentally, this is what I do to preload images, which is nice because it doesn't use javascript.
Visibility:hidden won't do the same thing because some browsers are smart and won't make the request unless it thinks its actually visible.
Why not try the simple:
position: absolute;
left: -1000px;
I can't see why it wouldn't work.
I'm not sure of the percentages you're talking about that are using < 4.6, but if it's that important to you, then I can see a rationale for accepting that you can't please all the people all the time, and an acceptable cascading solution to this should be achievable. Probably with a link to explain the benefits of upgrading and enabling css.
height: 0;
overflow: hidden;
visibility: hidden;
color: #fff;
background: #fff;
BTW - you'd better make sure that you're css is good if you're telling someone to turn it on... :-)
What makes you think display: none is not supported before version 4.6? Did you test that, or are you going by their documentation?
I'm not a mobile developer either, so I'm just going by what I gleaned from the documentation.
The BlackBerry Browser 4.6 CSS Reference indeed mentions "Availability: BlackBerry® Device Software version 4.6 or later" for the display property, but their BlackBerry Browser 4.3 Content Developer Guide indicates that 4.3 already supported a very limited version of the display property, including display: none. Versions before 4.3 don't support the display property (again, going by the BlackBerry Browser developer documentation).
Can you assume your users do at least have firmware version 4.3, or is that just as unacceptable as assuming they have 4.6?
Have you tried simply setting the width and height to zero? I'm not familiar with the BlackBerry (Browser), but I'm sceptically assuming its CSS support is less than perfect, certainly on the older versions. I wouldn't be surprised if this worked:
.BBwarn {
display: none; /* for 4.6 and up */
width: 0px; /* for 4.3 */
height: 0px;
}
But then width and height are only supported on all elements starting from version 4.3. Before that they could only be applied to <button> and <img> tags and some <input> types (according to the documentation).
So perhaps the safest way to really make it work on all BlackBerry firmware versions is to use an image for the warning, and use CSS to set its width and height to zero.
If an image is not an option (due to lozalization issues or so, perhaps), an ugly hack might be to specify an empty/illegal image source and put the warning text in the alt attribute. I don't know if setting its width and height to zero would still hide that alt text then.
visibility: hidden; will work, but the space taken up by that particular div will still appear. If you are going to use the negative left-margin method, remember that you will need to set the object's position to absolute.
How about this:
clip: rect(0,0,0,0);
Note: Please note the clip property does not work if "overflow:visible" is used.
In your case:
<div class="BBwarn">
please activate your css support and a link
</div>
just add this css:
.BBwarn{
position: absolute;
clip: rect(0,0,0,0);
}
You could position it absolutely off the screen.
But I, also, am not a mobile developer.
I assume You don't want to use JavaScript because the Blackberrys don't support it.
What about if you did the opposite and displayed the block of code with JavaScript, rather than tried to hide it?
<script type="text/javascript"><!--
document.open();
document.writeln('<div class="BBwarn">');
document.writeln('please activate your css support and a link');
document.writeln('</div>');
document.close();
//--></script>
This is a bit of a hack, but would not display the text with disabled JavaScript...
You can do something like wise:
.class{
opacity:0; overflow:hidden; visibility: hidden; height:0;
}
for being more precise you can add :
color:transparent; background-color:transparent;
What exactly is wrong with (the earlier mentioned)
width: 0
height:0
visibility: hidden
width: 0 height:0 visibility: hidden
...Does not always work with firmware 2.2 and older. Sometimes you can get an element to be hidden, but it will reappear with certain keystrokes (like underscore, for instance).
Or you could use Please enable Javascript
And use an image that reads "Enable CSS" and style it using "display:none".
So that whenever the corresponding feature is enabled these warnings wont show.
Alternately, I presume you are using some server side code? You could try detecting for the most common known platforms that support specific versions of css/javascript and deliver content accordingly. You might not even have to write it all yourself.
I had a similar problem when I was trying to customize a select box using javascript in BlackBerry Curve 8530 (OS 5.0). But, the menu created couldn't be hidden because the css following properties still don't work:
display
overflow
position: absolute
visibility
z-index
And destroying and recreating the HTML elements didn't work either, so I got here and could solve my problem.
I know my answer isn't exactly about the question raised here, but once I got here when had problems, I think I'm not the only one with it happened and is going to.
Anyway, even if those css properties worked, what I needed was some code that could work on the most of the BB models.
My solution was made using all the answers found here. It was simple. I made two classes:
.element
{
width: 100px;
height: 100px;
font-size: 12px;
color: black;
background-color: transparent;
border: 1px solid black;
}
.element_hidden
{
width: 0px;
height: 0px;
font-size: 0px;
color: white;
background-color: white;
border: none;
}
Yes. I've made two of them for each kind of element I had in my page.
Initially, all classes are set to class="element_hidden", so when the mouse is over the select box menu, all the classes are changed to class="element" and they are shown and hidden as if they were made invisible/visible.
I hope this can be useful to someone! ;D
We can use the transform property to scale the element along the x and y axis.
. BBwarn{
transform : scale(0,0);
}
I used font size to obtain this without using display none
font-size: 0px;
As you said in question that you need solution for Blackberry version below 4.6 and there are very few CSS properties supported for Blackberry version below 4.6 so we can use some sort of hack for this purpose. Try and set the text color to whatever the background is or set font-size to 0. It's a hack, but it makes it invisible. Run the following snippet and let me know if its works for you.
.alert1 {
color: #fff; //3.8 or later
}
.alert2 {
font-size: 0; //3.8 or later
}
<b>Alert1</b>
<div class="alert1">
please activate your css support and a link
</div>
<b>Alert2</b>
<div class="alert2">
please activate your css support and a link
</div>