Develop Reference

How can I make the default audioplayer background be transparent

I want to make the background for the audio player be transparent. With the thing I tried I can change the color to any color but it wasn't working when I put transparent.
audio::-webkit-media-controls-play-button,
audio::-webkit-media-controls-panel {
background-color: transparent;
}

Like #snow said, you can't make the background transparent but you could make its opacity 0
something like this:
audio{
opacity: 0%;
}

is it possible to change just using CSS? the short answer is no, It's NOT possible. An audio player is an object created by the browser itself, that's why it looks different depending on the browser you use.
You can apply the same background color to the audio tag if your parent or body background is white you need to apply the same for audio
audio::-webkit-media-controls-play-button,
audio::-webkit-media-controls-panel {
background-color: #fff;
color: #fff;
}

change <a> element color darkmode.js

I add 3 icons from fontawesome and the color of the icons like this:
I wanted to make the color of the icons black, but when I add darkmode.js and get the site darkmode, the icons do not change color, they remain black and do not appear.
How do I fix it?

You could change the text color in dark mode by using the .darkmode--activated selector.
As we can't see your html lets suppose this icons have the class social-icons, you could create a css rule to change their color to white:
.darkmode--activated .social-icons {
color: white;
}

How can I find the element's color on :hover?

I use Chosen plugin and as you see in image below, the :hover's color for <li> is a chromatic blue. All I'm trying to do is changing it to red color.
I worked on it by Chrome inspect tool and I figured it out which that color comes from the highlight class. See:
Ok, I've change it to red, but still <li>'s hover is blue. How can I change it?
Here is the .css file and here is a demo.

See this fiddle
The reason why it wasn't working when you were trying to change the style from your CSS was because, from the inspector, I could see that the styles for .highlighted was applied through an inline CSS which was overriding all the other styles. To overcome that, use !important in your CSS.
Also, the blue color that was shown was not just the background-color. Instead, it was a background-image. Thus you will have to override the background-image too..
Thus, add the below given styles to your CSS to change the hover color to red.
.highlighted{
background-color:red !important;
background-image:none !important;
}

as Lal said, please check also background-image:
background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(20%,#3875d7),color-stop(90%,#2a62bc));
background-image:-webkit-linear-gradient(#3875d7 20%,#2a62bc 90%);
background-image:-moz-linear-gradient(#3875d7 20%,#2a62bc 90%);
background-image:-o-linear-gradient(#3875d7 20%,#2a62bc 90%);
background-image:linear-gradient(#3875d7 20%,#2a62bc 90%);
There are linear gradients so maybe you want to change blue color #3875d7 to the color you want? You need to change corresponding second color of gradient also {#2a62bc}

Why not just change the color it sets in the CSS that chosen provides for you? Open up the file, ctrl-f color if you need to and just find that blue, swap the # value for a red one that you want.
And if you want to be lazy just find every instance of the blue and change it to red so you don't worry about it sometimes being blue and sometimes red.

You have to override the css. You may define this in your page's css rather than modifying the Chosen CSS because it's not meant to be modified, other developers might need to use the same library in your codebase
.chosen-container .chosen-results li.highlighted {
background-color: #dc2951 !important;
background-image: none;
}

Why does changing style via JavaScript gets affected by CSS transition

I am simply changing changing the color and background-color of a button when I click on it.
<input type="button" value="click me" id="myButton" onclick="ChangeColor()"/>
The CSS of this button contains CSS transition for the color and background-color, however, on the :hover pseudo-element I didn't add any styles, I didn't change the color.
#myButton{
color:#3399FF;
background-color:#FFFFFF;
/* These transitions are supposed to change the color in case I hover over the button */
-webkit-transition: background 0.5s,color 0.5s;
-moz-transition: background 0.5s,color 0.5s;
transition: background 0.5s,color 0.5s;
}
#myButton:hover{
/* But since there's nothing here, the color won't change when I hover */
}
Now, when I change the styles via JavaScript, they change while using the transitions, means, the colors will change after 0.5s, and not instantly.
function ChangeColor()
{
document.getElementById("myButton").style.color = "#FFFFFF";
document.getElementById("myButton").style.backgroundColor = "#3399FF";
}
This is a really good thing, and I like it, but I'm just wondering, how does JavaScript respect CSS3 transitions? Is there any documentation for this?

Your transitions are applied whenever the value of the property is changed. It doesn't matter whether you change it on hover, focus, resize (with a media query for example), click or any other event via JavaScript.
In general, you have a transition between two states of the element. You first define the initial state:
#myButton {
color: #39f;
background: #fff;
transition: .5s;
}
When you change the value of either of those two properties (and it doesn't matter whether you do this using the :hover pseudo-class or JavaScript), your element will go into another state and you are going to have a transition between the values of the properties from the initial state and those from this new state.

The method you're using to change the style with JavaScript is essentially a way of manually changing the style attribute directly on the element itself. Any time the style changes to something else and you have a transition defined for it, that transition will activate to change to the new style. That includes changes that JavaScript makes to the styles.

how do I make rounded corners on hovers?

I'm making a theme for wordpress. My navigation bar has rounded corners like apple's site. I want to add a hover style to it, but I can't get it to hover with rounded corners, like apple's nav bar does. I'm using a big image for the background and using wordpress 3's menu system. So, how can I hover the first and last item on the bar? Thanks for helping.

With javascript you can select and change whatever you want but if you just want to use css, you´ll have to apply the :hover to the parent of all button sub-elements so that you can select all sub-elements using css. However, that excludes older versions of IE as they don´t support :hover on elements other than a tags.
Example:
.button:hover {
//
}
.button:hover .main_section {
// change to main section of button on hover
}
.button:hover .left_part {
// change to left side on hover
}
.button:hover .right_part {
// change to right side on hover
}

You'll have to have a different background image for the "hover" style.