i have this code, taken from orbit slideshow custom next prev buttons links left right arrows
.orbit-container .orbit-prev span,
.orbit-container .orbit-next span {
color: red;
border: none;
font-size: 70px;
text-indent: 0;
margin-top: -32px;
}
.orbit-container .orbit-prev {
background-color: transparent;
}
.orbit-container .orbit-prev span:before {
content: "\2039";
}
.orbit-container .orbit-next {
background-color: transparent;
}
.orbit-container .orbit-next span:before {
content: "\203A";
}
which works, but when i try to replace with my own arrows it is not working!
i have a custom arrows, and have imported them into fontello, so in my fontello.css file i have:
.icon-arrow_left_navigate_previous:before { content: '\e846'; } /* '' */
.icon-arrow_right_navigate_next:before { content: '\e847'; } /* '' */
and using this as a class works, but when i try to use it within
.orbit-container .orbit-prev span:before {
content: "\e846";
}
.orbit-container .orbit-next span:before {
content: "\e847";
}
this does not work!
but <i class="icon-arrow_left_navigate_previous"></i> displays the left arrow.
any advice much appreciated.
Make sure that your code actually override original and that your fonts are affecting those elements (check computed style of the element) otherwise those references will refer characters in the different font.
Related
Basically I want the anchor to move to the right with a smooth animation when i hover over it. I have a '>' set before the anchor, which i don't want to move. I managed to do this on a website i made a while ago, but lost the files and don't remember how to do it. Would love to get some assistance.
a::before {
content: ">";
color: black;
}
a:hover {
right: -2px;
}
You need the right selector. a:hover:before selects the :before pseudo element when the tag is hovered.
This assumes you have a lot more code that is missing here.
a:before {
content: ">";
color: black;
}
a:hover:before {
right: -2px;
}
Something like this:
a::before {
content: ">";
color: black;
display: inline-block;
padding-right: 0;
transition: all 1s ease;
}
a:hover::before {
padding-right: 5px;
}
Linky
I changed the css properties of the scrollbar and the buttons disappeared. When I added this to my stylesheet:
::-webkit-scrollbar-button {
display: block;
}
the scrollbar had two rectangles on the top and buttom but there were no arrows. When I tried clicking the top and bottom parts of each of the rectangles, it scrolled up and down. Is there a way to add only one button on each side (top and bottom) that have arrows?
CSS:
/* Properties of Scrollbar */
::-webkit-scrollbar {
width: 15px;
}
::-webkit-scrollbar-track {
background: #4d4d4d;
}
::-webkit-scrollbar-button {
display: block;
}
::-webkit-scrollbar-thumb {
background: #8d8d8d;
}
::-webkit-scrollbar-thumb:hover {
background: #2b2b2b;
}
You're using ::-webkit-scrollbar-button wrong. It's supposed to be used like this:
::-webkit-scrollbar-button {
background: blue;
}
This could also be found here
I'm trying to find a source explaining how to fully style the input type "time". I cannot find a single example explaining all of the style attributes!
Only one I've found is:
input[type="time"]{
/**style goes here **/
}
Which doesn't help much..
Tried this:
input[type="time"]::-webkit-inner-spin-button {
-webkit-appearance: none;
cursor:pointer;
display: block;
width:20px;
color: red;
text-align:center;
position:relative;
}
Spinner does not turn red for example.
I made some progress styling the input in Chrome/webkit, but I can't figure out how to style anything in Firefox. Here's a demo that I put together on Codepen.
input[type=time] {
border: none;
color: #2a2c2d;
font-size: 14px;
font-family: helvetica;
width: 180px;
}
/* Wrapper around the hour, minute, second, and am/pm fields as well as
the up and down buttons and the 'X' button */
input[type=time]::-webkit-datetime-edit-fields-wrapper {
display: flex;
}
/* The space between the fields - between hour and minute, the minute and
second, second and am/pm */
input[type=time]::-webkit-datetime-edit-text {
padding: 19px 4px;
}
/* The naming convention for the hour, minute, second, and am/pm field is
`-webkit-datetime-edit-{field}-field` */
/* Hour */
input[type=time]::-webkit-datetime-edit-hour-field {
background-color: #f2f4f5;
border-radius: 15%;
padding: 19px 13px;
}
/* Minute */
input[type=time]::-webkit-datetime-edit-minute-field {
background-color: #f2f4f5;
border-radius: 15%;
padding: 19px 13px;
}
/* AM/PM */
input[type=time]::-webkit-datetime-edit-ampm-field {
background-color: #7155d3;
border-radius: 15%;
color: #fff;
padding: 19px 13px;
}
/* 'X' button for resetting/clearing time */
input[type=time]::-webkit-clear-button {
display: none;
}
/* Up/Down arrows for incrementing/decrementing the value */
input[type=time]::-webkit-inner-spin-button {
display: none;
}
<input type="time" value="13:30"/>
I wasn't able to find documentation anywhere. I got this far by inspecting the input's internal DOM, hovering over each element in devTools to see what portion of the UI it corresponded to, then grabbed its pseudo attribute.
If you can't currently see the internal DOM, you'll have to expose it by going into Chrome's DevTools Settings, Preferences, Elements and make sure the "Show user agent shadow DOM" option is enabled.
There's another pseudo element: -webkit-calendar-picker-indicator - the clock that shows up in chrome to allow you picking time using a mouse.
input[type="time"]::-webkit-calendar-picker-indicator {
filter: invert(0.5) sepia(1) saturate(5) hue-rotate(175deg);
}
<input type="time">
To style the input type date and time - use the following css -
[type="date"] {
background:transparent url(/assets/images/calendar.png) 97% 50% no-repeat !important;
}
[type="date"]::-webkit-inner-spin-button {
display: none;
}
[type="date"]::-webkit-calendar-picker-indicator {
opacity: 0;
}
[type="time"] {
background:transparent url(/assets/images/clock.png) 97% 50% no-repeat !important;
}
[type="time"]::-webkit-inner-spin-button {
display: none;
}
[type="time"]::-webkit-calendar-picker-indicator {
opacity: 0;
}
Here I have SCSS to style list items. What I'm wondering is if the order of selection for classes and pseudo-selectors. So basically, does &:before.active equal &.active:before?
Here is the full example of the latter:
.sidebar-list {
list-style-type: none;
padding: 0;
& li {
padding: 4px 0;
&:before { // Here,
color: darken($font-color, 60%);
font-family: "FontAwesome";
content: "\f101\00a0";
}
&.selected:before { // And here.
color: darken($font-color, 30%);
}
}
}
And the former of the part that matters (inside the li):
&:before { // Here,
color: darken($font-color, 60%);
font-family: "FontAwesome";
content: "\f101\00a0";
&.selected { // And here. This would evaluate to "li:before.selected"
color: darken($font-color, 30%);
}
}
Which one would be correct for styling the :before psuedo-selector for a list item?
Thanks!
Yes, the order does matter. li:before.selected will basically be ignored because it is invalid.
Here's a snippet for example:
span::before {
content:'span::before (Normal)';
background-color: #ddd;
}
/* Valid */
span.ribbon::before {
content: "span.ribbon::before (Valid)";
background-color: #0f0;
}
/* Invalid. Will be ignored */
span::before.ribbon {
content: "span::before.ribbon (Invalid)";
background-color: #f00;
}
<span></span>
<span class="ribbon"></span>
Also, you'll want to use double-colons for the ::before pseudo-element (updated in CSS3).
Reference: Pseudo Element Docs
I use the <details> element in my website and I want to change the design of the expand/collapse arrows. Is it possible to set a picture instead of the existing characters?
Also, is it possible to change the position of the arrows? I want it to be on the right side and not next to the summary text.
Since <summary> has display: list-style, customising the disclosure marker can be done by setting the list-style-type property:
details > summary {
list-style-type: '▶️';
}
details[open] > summary {
list-style-type: '🔽';
}
details {
border: 1px solid gray;
border-radius: 0.2rem;
padding: 0.5rem;
}
details[open] > summary {
margin-bottom: 0.5rem;
}
<details>
<summary>An example</summary>
With some example text shown when expanded.
</details>
Unfortunately some current-generation browsers (ahem, Safari …) still don’t support this. One workaround is to set list-style: none, and then provide a custom content via the ::marker pseudo-element. This can still be used to provide further customisations. Except … well, Safari also doesn’t support ::marker, it only supports the non-standard ::-webkit-details-marker. And it doesn’t support setting custom contents within it. So instead we need to hide the element and set the actual icon via ::before:
details > summary {
list-style-type: none;
}
details > summary::-webkit-details-marker {
display: none;
}
details > summary::before {
content: '▶️';
}
details[open] > summary::before {
content: '🔽';
}
details {
border: 1px solid gray;
border-radius: 0.2rem;
padding: 0.5rem;
}
details[open] > summary {
margin-bottom: 0.5rem;
}
<details>
<summary>An example</summary>
With some example text shown when expanded.
</details>
Is it possible to set a picture instead of the existing characters?
This is certainly possible ─ setting the baskground image to your icon and setting the original marker's colour to transparent will produce this effect.
Example:
details summary::-webkit-details-marker {
background: url(/images/toggle-expand.png) center no-repeat;
color: transparent;
}
details[open] summary::-webkit-details-marker {
background: url(/images/toggle-collapse.png) center no-repeat;
color: transparent;
}
This only works in Webkit browsers and Chrome. You might want to consider rotating the icon instead of replacing it with a different one, in which case you can use the following:
summary::--webkit-details-marker {
transform: rotate(-90deg);
}
details[open] summary::--webkit-details-marker {
transform: rotate(0deg);
}
[dir="rtl"] summary::--webkit-details-marker {
transform: rotate(90deg);
}
[dir="rtl"] details[open] summary::--webkit-details-marker {
transform: rotate(0deg);
}
This solution rotates the icon if it is originally pointing downwards. It also factors in details elements that are within RTL parents; though be careful with this approach if mutliple text directions are used throughout the document.
MDN says
You can also change the style to display: block to remove the disclosure triangle.
As of 2021, this is supported by all major browsers, no need for -webkit-details-marker anymore.
summary {
display: block;
}
summary::after {
margin-left: 1ch;
display: inline-block;
transition: 0.2s;
content: '\203A'; /* chevron */
}
details[open] summary::after {
transform: rotate(90deg);
}
<details>
<summary>Summary</summary>
Details provided if clicked.
</details>
You can just add this styles
details>summary {
list-style-type: none;
outline: none;
cursor: pointer;
border: 1px solid #eee;
padding: 5px;
border-radius: 5px;
}
details>summary::-webkit-details-marker {
display: none;
}
details>summary::before {
content: '+ ';
}
details[open]>summary::before {
content: '- ';
}
details[open]>summary {
margin-bottom: 0.5rem;
}
<details>
<summary>Click here</summary>
Some text!
</details>
It is simple!
The best code I found was on http://html5doctor.com/the-details-and-summary-elements/, this neat little trick stands up. And you can put whatever you want to replace the icons in the pseudo-elements.
summary::-webkit-details-marker {
display: none
}
summary:after {
background: red;
border-radius: 5px;
content: "+";
color: #fff;
float: left;
font-size: 1.5em;
font-weight: bold;
margin: -5px 10px 0 0;
padding: 0;
text-align: center;
width: 20px;
}
details[open] summary:after {
content: "-";
}
Picture of Code Output
Link to a small site that you can use the dev tools on to see how it works http://output.jsbin.com/egefop/15#html,live