Bug #70243
closed
Polishing dropdown selectors for 7.6 LTS
Added by Rafal Brzeski about 9 years ago.
Updated almost 9 years ago.
Category:
Backend User Interface
Description
In TYPO3 7 bootstraped dropdown selectors dont fits to the rest of form fields, there is a different border-radius, disabled border-top-left and bottom radius didn't work with add ons, furthermore dropdowns looks different in every browser.
There is a pretty simple workaround for this case, I think TYPO3 7.6 LTS needs improvements in this place because this is a matter of image.
This is what should be done:
select.form-control {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%3Cpath%20fill%3D%22#000%22%20d%3D%22M7%2010l5%205%205-5z%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E");
padding-right: 25px;
background-repeat: no-repeat;
background-position: right center;
&:-ms-expand {
display: none;
}
}
You can look at the live example http://r4fx.github.io/mate/doc/www/forms.html#nav-basic
Please make the selectors look beautiful! :-)
Files
Hi Rafal,
as far as I can see, this has been solved on the latest master (7.6-dev). Can you confirm? I attach some screenshots.
- File deleted (
Cattura-7.6-chrome.PNG)
I checked it, and... no. I noticed out that it looks nice on Windows, not on Mac, so my screenshots are still valid but for Apple devices.
- Status changed from Needs Feedback to New
I would suggest something like:
select.form-control{
-webkit-appearance: none;
-webkit-border-radius: 0px;
}
this is not a good idea, when you put -webkit-appearance: none;
arrow from the right will disappear.
I prepared jsfiddle with complex code example - https://jsfiddle.net/x76j455z/8/ tested on many browsers and systems on Browserstack, and it looks nice everywhere.
Whole idea is simple, just disable predefined appearance on every browser, and then we can do anything with dropdown, to achieve arrow sign from the right we can use svg icon compressed with base64 as background image.
This method is from css tricks https://css-tricks.com/probably-dont-base64-svg/, svg icon may be compressed by online tools like http://pressbin.com/tools/urlencode_urldecode/.
I looked a long time for the best results to style native dropdown selector which will look the same in all browsers, and this is one of the best method I found.
you are right, I did not notice it :) we could add the background base64-encoded svg as you suggest :)
- Category set to Backend User Interface
- Target version set to Candidate for patchlevel
- Status changed from New to In Progress
- Assignee set to Gianluigi Martino
- Status changed from In Progress to Under Review
this issue was solved and may be closed
- Status changed from Under Review to Closed
Also available in: Atom
PDF