Style your Checkbox Button with the Checkbox component from Element Plus

Currently, I am utilizing Vue 3 along with the Element Plus library. My goal is to modify the hover, active, and select colors of the Checkbox Button that I have implemented. Unfortunately, my attempts to do so have not been successful. I essentially copied the code from the source, so feel free to take a look at it or experiment using the playground. Thank you in advance for any assistance provided!

Here's what I'm working with:

I've experimented with using :hover and :active selectors. Could it be that I'm using them incorrectly?

javascripthtmlcssvue.js

Answer №1

If you want to make it active, here's the way:

.el-checkbox-button.is-checked .el-checkbox-button__inner {
    color: var(--el-checkbox-button-checked-text-color);
    background-color: #208eff;
    border-color: var(--el-checkbox-button-checked-border-color);
    box-shadow: -1px 0 0 0 var(--el-color-primary-light-7);
}

As for hovering over it:

.el-checkbox-button__inner:hover {
    color: var(--el-color-primary);
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Specify the data type of a nested object in a React component with TypeScript

Interface Button{ buttonTitle: { name?: string; } } What is the best way to specify a type for the buttonTitle property? ...

javascriptnode.jstypescript

Utilizing multiple instances of Vue.js within Laravel

Hello there! I have a question about working with multiple instances of VUEjs in Laravel. How can I effectively switch between using components and instantiating VUE directly in the view? Whenever I try to work with both at the same time, I encounter issue ...

laravelvue.js

The jQuery prop("disabled") function is not operating as expected

Although I've seen this question answered multiple times, none of the suggested solutions seem to be working for my specific example. Hopefully, a fresh set of eyes can help me figure out what's going wrong. Even after adding alerts to confirm t ...

javascriptjqueryhtmljquery-mobile

Using Javascript or jQuery, focus on a div containing a paragraph element with a particular text

I've been struggling for hours trying to figure out how to select a div that contains a specific p element. HTML <div class="NavBar_Row_Button2"><p>DONATE</p></div> <div class="NavBar_Row_Button2"><p>CONTACT</p ...

javascriptjquery

Using AJAX in JavaScript within an HTML document is a valuable skill to have

I have the following JavaScript function that I need to call the /print2 function without clicking any buttons. I attempted to use Ajax for this, but I am new to Ajax and JavaScript. Can you help me identify where the issue might be? Thank you... <scr ...

javascripthtmlajax

Vanishing Tooltip following an implementation of the backdrop-filter

I'm having an issue with the blur effect on my background image. Although it works well, my tooltips also end up being blurred behind the divs: https://i.stack.imgur.com/BMdh4.png Is there a way to ensure that my tooltips stay on top of the subseque ...

javascripthtmlcss

Substitute numerical strings with actual numbers within an array

I need to transform an array from arr = ["step","0","instruction","1"] to newArr = ["step",0,"instruction",1] Below is the code I am using for this operation: newArr = arr.map((x) => { ...

javascriptarraysreactjsreplace

unable to pre-select default option

My dynamic options select is functioning correctly, adding the selected attribute to a specific option with an id value. However, I am encountering an issue where even with an option that has the selected attribute, the first option is always displayed as ...

phphtmlwordpress-theming

The kendo-grid-messages are utilized across all columns

I encountered an issue while working with the following code: <kendo-grid-column field="isActive" [title]="l('Status')" filter="boolean"> <kendo-grid-messages filterIsTrue="Yes" filterIsFalse=&qu ...

javascriptangularkendo-uikendo-grid

ways to add spacing between bootstrap columns

I am currently using Bootstrap 5 and I'm trying to create a row with 6 columns. I have added gutter in the row but for some reason, the spacing between the columns is not being applied. Can anyone help me figure out what I'm doing wrong here? Bel ...

htmlcssbootstrap-5

What is the best way to retrieve the responseText using the jQuery.getJSON method within JavaScript?

I am currently facing an issue where I am attempting to retrieve information from a JSON file located in my directory by utilizing the jQuery.getJSON method. Unfortunately, when I try to access the object shown in the image, I am unable to extract the resp ...

javascriptjqueryjson

Why aren't my messages showing up once I exit the textbox on my website?

After writing various functions to compare two passwords, I encountered an issue. My goal was for the message "The passwords match" or "Please enter your password again because the two passwords don't match" to be displayed when clicking out of the "v ...

javascripthtmlpasswords

Tips for retrieving the value of a corresponding data attribute by the text within a div using jQuery in JavaScript

I have several divs with different names and values assigned to the data attribute data-category Now, I am in need of retrieving the value of data-category based on specific text present inside the div. <div class='ext-category' data-categor ...

javascriptjqueryattr

I am looking for a way to generate unique dynamic IDs for each input textbox created within a PHP while loop. Can

How can I retrieve the ID of a selected text box generated within a while loop in order to update a field similar to phpMyAdmin? <?php while($row=mysql_fetch_assoc($result)) { ?> <tr> <td><input type ...

javascriptphpjqueryajax

Borders in my CSS/HTML table design

Hey, I'm currently facing an issue with my class project. I've created a table with a series of images to form a background image. However, there are borders on the table that I need to adjust. Here is the current look: I am trying to have a sq ...

htmlcss

The correlation between frames per second (FPS) and the milliseconds required to render a frame in the stats plugin is known as the frame

Recently, I've implemented the Stats.js plugin to keep track of my three.js performance. Something seems off with the FPS (frames rendered per second) and MS (milliseconds needed to render a frame) information: According to my calculations, if it ta ...

javascriptthree.jsrequestanimationframe

Creating a line of functions pool in Javascript with a delay feature

Recently, I created a code snippet that simulates a function line. It involves calling functions such as fn1, delay, fn2, delay, and so on. The idea is to call a function, remove it from the line, have a short sleep, and repeat. However, I've encount ...

javascriptjqueryfunctionlinepool

What is the best way to emphasize a certain row within XSLT?

I am seeking a solution to emphasize rows containing the "year" element with a value exceeding "2000" in XML and XSLT. Here is the code snippet: XML <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/xsl" href="harrypotterbooks. ...

htmlcssxmlxslt

The Redis port and host remain unset despite having defined environment variables

While utilizing the redis npm package, I encountered an issue where the host and port values were showing as undefined when trying to connect. Even after checking my process.env object, I could see that the values were properly set. Strangely, it only beca ...

javascriptnode.jsnpmserverredis

Strategies for accessing a collection of DOM elements in React

Currently, I'm embarking on a challenge to complete 50 projects in 50 days by Brad Traversy. However, I've decided to take it up a notch by building them in Next.js with React since that's what I work with professionally. Unfortunately, thi ...

javascriptreactjsnext.jscomponents