We Keep Coding

How to make when hover an image to change color and arrow of the button to make transparent

I am working on project with VueJS add vutify. I have created the component v-card vutify. Into v-card I have v-img, v-card-action which into it I have set text and button to separate each side.
I am sharing my link on code pene what I have done until now just as example.
[enter link description here][1]
I want to achieve effect when I click hover image to change color and arrow into of the button to make transparent. Any idea?
Exactly as the link I am sharing below.
[enter link description here][2]
[1]: https://codepen.io/venallanaj/pen/PoEbKYx

The link you provided does not work. Please supply a valid example. Also, please clarify your question. What element/s do you want to change color? Do, you want the elements to change color when the mouse is hovered over the element?
To change color of an element when you hover over the element you could grab the element in CSS and then add the ::hover selector to produce the results.
For example, the following would change the behavior of the input element when the mouse is overed over it.
`input {
border-radius: 2px;
border: 1px solid lightgray;
color: rgb(100, 100, 100);
background-color: transparent;
height: 28px;
line-height: 0;
transition: 0.5s;
}
input:hover{
border: 1px solid black;
color: black;
cursor: pointer;
transition: 0.5s;
}`

I am trying to make the text in a button change color when I hover over in with the mouse using CSS

I have a wordpress website and I have a button in the header menu which is called 'Join as a tradesperson'.
http://prntscr.com/px7mdt
It has a green border and white background and the text is black.
I wanted the background of the button to change to green (color: #25ad00) and the text to change to white (color: #fff) when I hover over it.
I have added the following code to custom css is the dashboard:
body #menu-item-1847 a{
color:#000;
}
#menu-item-1847 a{
font-weight: 700;
border: 2px solid #25ad00;
border-radius: 5px;
padding: 2px 20px
}
#menu-item-1847 a:hover {
color: #fff;
background-color: #25ad00;
}
...but now when I hover over the button the background turns green but the text remains black:
http://prntscr.com/px7o9u
I was jut wandering what is wrong with the code as I thought the
#menu-item-1847 a:hover {
color: #fff;
...would change the color of the text to white when I hover over it?
Thank you

It's all about your DOM's CSS specificity you can make your code working without adding !important.
Just increase the CSS specificity. (share your HTML I will explain you this with CSS specificity)
Please read about CSS specificity. Using !important is not good practice. It is not clean code. Go through these articles.
Don't use !important instead increase CSS specificity
Is Using !important is a right choice?

To overwrite existing CSS, add !important like this:
#menu-item-1847 a:hover {
color: #fff!important;
background-color: #25ad00!important;
}

You can using !important statement like this.
(If you specified the selector correctly, if not, double check the selector #menu-item-1847)
#menu-item-1847 a:hover {
color: #fff!important;
}
It means, something like:
Use me, if there is nothing important else around!

Applying a new background color to Jquery's slider handles

I am not sure why I am having such troubles with this. I have browsed Jquery's slider css file and found the class name of the handles. .ui-slider-handle and it even says in the API docs that is the name of it Slider API doc link, but whenever I add background or background-color and give it a color, it does nothing. The same thing for trying to get the handles to cover the entire bar.
I created a demo page on a site I have to show what I am trying to do. Demo page
.ui-slider-handle {
height: 100%;
color: #000;
margin: 0;
}
Also if someone doesn't mind. I am trying to make the words "Budget" appear in the red part (the budgeted range), but when I applied this: <div class="ui-slider-range">Budget</div> into my html, the word Budget shows to the far left of the slider. The html is like this:
<div id="slider-range">
<div class="ui-slider-range">Budget</div>
</div>
.ui-slider-range {
background: red;
text-align: center;
}
How can I add the background-color to the slider handles and add the word "budget", so that it is in the middle of the red area?

To change ui-slide-handler color, try:
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
background: yellow !important;
}
This is the rule to be overwritten.
The original rule is the following:
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
border: 1px solid #d3d3d3;
background: #e6e6e6 url("images/ui-bg_glass_75_e6e6e6_1x400.png") 50% 50% repeat-x;
font-weight: normal;
color: #555555;
}

It's very easy to see all the rules that apply to any element in the page using browser dev tools element inspector.
Your rule isn't specific enough based on the existing rules that have higher specificity with selectors like:
.ui-widget-content .ui-state-default
/* and */
.ui-slider-horizontal .ui-slider-handle
A simple way to make more specific for one instance would be to use your ID of main widget in selector
#slider-range .ui-slider-handle
Or for more broad reaching use.... copy the most specific selector and use that. Last rule in page with same selector takes precedence

How to set thickness of a blinking cursor inside input-box ? [duplicate]

I want to style the caret of a focused <input type='text'/>. Specifically, the color and thickness.

'Caret' is the word you are looking for. I do believe though, that it is part of the browsers design, and not within the grasp of css.
However, here is an interesting write up on simulating a caret change using Javascript and CSS http://www.dynamicdrive.com/forums/showthread.php?t=17450 It seems a bit hacky to me, but probably the only way to accomplish the task. The main point of the article is:
We will have a plain textarea somewhere in the screen out of the view
of the viewer and when the user clicks on our "fake terminal" we will
focus into the textarea and when the user starts typing we will simply
append the data typed into the textarea to our "terminal" and that's
that.
HERE is a demo in action
2018 update
There is a new css property caret-color which applies to the caret of an input or contenteditable area. The support is growing but not 100%, and this only affects color, not width or other types of appearance.
input{
caret-color: rgb(0, 200, 0);
}
<input type="text"/>

If you are using a webkit browser you can change the color of the caret by following the next CSS snippet. I'm not sure if It's possible to change the format with CSS.
input,
textarea {
font-size: 24px;
padding: 10px;
color: red;
text-shadow: 0px 0px 0px #000;
-webkit-text-fill-color: transparent;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
color:
text-shadow: none;
-webkit-text-fill-color: initial;
}
Here is an example: http://jsfiddle.net/8k1k0awb/

In CSS3, there is now a native way to do this, without any of the hacks suggested in the existing answers: the caret-color property.
There are a lot of things you can do to with the caret, as seen below. It can even be animated.
/* Keyword value */
caret-color: auto;
color: transparent;
color: currentColor;
/* <color> values */
caret-color: red;
caret-color: #5729e9;
caret-color: rgb(0, 200, 0);
caret-color: hsla(228, 4%, 24%, 0.8);
The caret-color property is supported from Firefox 55, and Chrome 60. Support is also available in the Safari Technical Preview and in Opera (but not yet in Edge). You can view the current support tables here.

Here are some vendors you might me looking for
::-webkit-input-placeholder {color: tomato}
::-moz-placeholder {color: tomato;} /* Firefox 19+ */
:-moz-placeholder {color: tomato;} /* Firefox 18- */
:-ms-input-placeholder {color: tomato;}
You can also style different states, such as focus
:focus::-webkit-input-placeholder {color: transparent}
:focus::-moz-placeholder {color: transparent}
:focus:-moz-placeholder {color: transparent}
:focus:-ms-input-placeholder {color: transparent}
You can also do certain transitions on it, like
::-VENDOR-input-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;}
:focus::-VENDOR-input-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;}

It is enough to use color property alongside with -webkit-text-fill-color this way:
input {
color: red; /* color of caret */
-webkit-text-fill-color: black; /* color of text */
}
<input type="text"/>
Works in WebKit browsers (but not in iOS Safari, where is still used system color for caret) and also in Firefox.
The -webkit-text-fill-color CSS property specifies the fill color of
characters of text. If this property is not set, the value of the
color property is used. MDN
So this means we set text color with text-fill-color and caret color with standard color property. In unsupported browser, caret and text will have same color – color of the caret.

input{
caret-color: rgb(0, 200, 0);
}
<input type="text"/>

it is simple.
Just add the caret-color attribute like this:
* {cursor: url(http://labs.semplice.com/wp-content/uploads/2020/02/custom-cursor-arrow.png) 20 20, auto;}
input, div {padding: 20px;}
<input style="caret-color: rgb(0, 200, 0);">
<br>
<textarea style="caret-color: blue;"></textarea>
<br>
<div contenteditable style="padding: 5px; border: 1px solid black;border-color: black;caret-color: red"></div>

While I was trying to build a terminal like website i got to know that there is no way (yet) to change the style of the cursor using CSS.
But you can change the caret-color as shown in the other answer.
Then, after almost 3 days of research I got an Idea from inspecting a website (sorry, I can't provide the link)
It adds and removes a HTML span element in the command string and makes a block cursor but you can make any caret if you know the caret's position with a little bit of CSS.
I don't recommend this for a production application.
This helped me create a caret like you see in my site
You can see the source in this repo
Summary:
suppose your text is echo Hello with caret after H.
Then the code might be something like
<div>
<span>
echo H
</span>
<span class="animate-blink" > <!-- This span will act as your caret -->
e
</span>
<span>
llo
</span>
</div>
Hope it helps ;-)

jQuery Mobile setting Icons for Buttons

I am trying to add icons to buttons, which I have dynamically created using jQuery. I created the css class for the button. On running, I am getting a grey round circle on the side of the button, instead of the image. On inspecting elements, I get that the image for the button has been overridden.
How do I ensure that button icons appear instead of the grey circle?
The Code I have used is:
JS:
var btn1 = $("<button/>", {'id': 'TestButton'}).html('Sample Button');
btn1.buttonMarkup({ theme: 'c', icon: 'btn1' });
CSS:
.ui-icon-btn1 {
background-image: url('../../images/gallery.jpg');
background-color: rgb(255,255,255);
border-style: hidden;
-webkit-box-shadow: none;
box-shadow: none;
}

A simple solution is that you put !important to that property.
background: url('../../images/gallery.jpg') !important;
background-color: rgb(255,255,255) !important;
This worked for me on similar issue with jQuery- mobile.
Edit:
To remove the Disc around the button, you need to add
`border: 0 !important;`
to the class
.ui-li-link-alt .ui-btn but make sure you do not override the default behavior of the jQuery UI.