Steps to update the color of checkbox labels

Question

Steps to update the color of checkbox labels

I'm struggling with changing the colors of checkbox values based on their status - when checked, I want the text to display in green, and when unchecked, I want it to be red. Below is a sample input type, but I can't figure out how to style the true-value and false-value. If anyone has suggestions, please help! Thanks! Here's the complete code for reference.

            <label>Other Information:</label>
            <textarea v-model="student.otherInformation"></textarea> <br /><br />

            <input type="checkbox" v-model="student.agree" true-value="I want to receive promotions"
            false-value="I Don't want to receive promotions">

            <span>Agree receive our promotions.</span><br><br>
            <button type="submit" class="button" >Add a new student</button>
        </form>

javascript vue.js vuejs2

Answer 1

Answer №1

To apply a style in Vue.js:

new Vue({
  el: '#demo',
  data() {
    return {
      user: {name: "", age: 0, country: ""},
      users: [{name: "John", age: 28, country: "US"}, {name: "Alice", age: 25, country: "UK"}],
      countries: ["US", "UK", "CA"],
    }
  },
  methods: {
    addUser() {
      this.users.push(this.user)
    },
    removeUser(index) {
      this.users.splice(index, 1);
    },
    selectCountry(country) {
      this.user.country = country;
    },
    // 👇 method for selecting style
    applyStyle(i) {
      return this.users[i].age > 25 ? 'color: blue' : 'color: black'
    },
  },
})

.over-25 {
  color: Blue;
}
.under-25 {
  color: Black;
}
.btn-primary {
  background-color: transparent;
  border: 1px solid #3498db;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <h3>User Details</h3><hr>
  <form class="basic-grey" @submit.prevent="addUser">
    <label for="name">Name:</label>
    <input id="name" type="text" required v-model="user.name">
    <label for="age">Age:</label>
    <input id="age" type="number" v-model="user.age">
    <label>Country:</label>
    <select v-model="user.country">
      <option disabled selected value="">Please select your country</option>
      <option v-for="country in countries" :key="country">{{ country }}</option>
    </select>
    <button type="submit" class="button">Add User</button>
  </form>
  {{ user }}
  <h3>Users List</h3><hr>
  <table>
    <thead>
      <th>Name</th>
      <th>Age</th>
      <th>Country</th>
      <th>Action</th>
    </thead>
    <tbody>
      <tr v-for="(u, index) in users">
        <td>{{ u.name }}</td>
        <td :style="applyStyle(index)">{{ u.age }}</td>
        <td>{{ u.country }}</td>
        <td><button class="btn-primary" @click="removeUser(index)">Remove</button></td>
      </tr>
    </tbody>
  </table>
</div>

Answer 2

To apply a style in Vue.js:

new Vue({
  el: '#demo',
  data() {
    return {
      user: {name: "", age: 0, country: ""},
      users: [{name: "John", age: 28, country: "US"}, {name: "Alice", age: 25, country: "UK"}],
      countries: ["US", "UK", "CA"],
    }
  },
  methods: {
    addUser() {
      this.users.push(this.user)
    },
    removeUser(index) {
      this.users.splice(index, 1);
    },
    selectCountry(country) {
      this.user.country = country;
    },
    // 👇 method for selecting style
    applyStyle(i) {
      return this.users[i].age > 25 ? 'color: blue' : 'color: black'
    },
  },
})

.over-25 {
  color: Blue;
}
.under-25 {
  color: Black;
}
.btn-primary {
  background-color: transparent;
  border: 1px solid #3498db;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <h3>User Details</h3><hr>
  <form class="basic-grey" @submit.prevent="addUser">
    <label for="name">Name:</label>
    <input id="name" type="text" required v-model="user.name">
    <label for="age">Age:</label>
    <input id="age" type="number" v-model="user.age">
    <label>Country:</label>
    <select v-model="user.country">
      <option disabled selected value="">Please select your country</option>
      <option v-for="country in countries" :key="country">{{ country }}</option>
    </select>
    <button type="submit" class="button">Add User</button>
  </form>
  {{ user }}
  <h3>Users List</h3><hr>
  <table>
    <thead>
      <th>Name</th>
      <th>Age</th>
      <th>Country</th>
      <th>Action</th>
    </thead>
    <tbody>
      <tr v-for="(u, index) in users">
        <td>{{ u.name }}</td>
        <td :style="applyStyle(index)">{{ u.age }}</td>
        <td>{{ u.country }}</td>
        <td><button class="btn-primary" @click="removeUser(index)">Remove</button></td>
      </tr>
    </tbody>
  </table>
</div>

Answer 3

Answer №2

Although I am not familiar with Vue, you can achieve the desired result using plain HTML and CSS

<!DOCTYPE html>
<html>
<style>
/* Custom checkbox styles */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Custom checkbox design */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #F00;
}

/* Change color when checked */
.container input:checked ~ .checkmark {
  background-color: #00FF00;
}

/* Checkmark design */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style checkmark */
.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
</style>
<body>

<h1>Custom Checkboxes</h1>
<label class="container">One
  <input type="checkbox" checked="checked">
  <span class="checkmark"></span>
</label>
<label class="container">Two
  <input type="checkbox">
  <span class="checkmark"></span>
</label>
<label class="container">Three
  <input type="checkbox">
  <span class="checkmark"></span>
</label>
<label class="container">Four
  <input type="checkbox">
  <span class="checkmark"></span>
</label>

</body>
</html>

Answer 4

Although I am not familiar with Vue, you can achieve the desired result using plain HTML and CSS

<!DOCTYPE html>
<html>
<style>
/* Custom checkbox styles */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Custom checkbox design */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #F00;
}

/* Change color when checked */
.container input:checked ~ .checkmark {
  background-color: #00FF00;
}

/* Checkmark design */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style checkmark */
.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
</style>
<body>

<h1>Custom Checkboxes</h1>
<label class="container">One
  <input type="checkbox" checked="checked">
  <span class="checkmark"></span>
</label>
<label class="container">Two
  <input type="checkbox">
  <span class="checkmark"></span>
</label>
<label class="container">Three
  <input type="checkbox">
  <span class="checkmark"></span>
</label>
<label class="container">Four
  <input type="checkbox">
  <span class="checkmark"></span>
</label>

</body>
</html>

Answer 5

Answer №3

To start, ensure your text is wrapped in semantic HTML elements such as the label tag. Once you have done that, you can use the following code to specifically style the input when checked or unchecked:

input[type="checkbox"]+* {
        font-weight: bold !important;
    }

    input[type="checkbox"]:checked+* {
        text-decoration: underline !important;
    }

Answer 6

To start, ensure your text is wrapped in semantic HTML elements such as the label tag. Once you have done that, you can use the following code to specifically style the input when checked or unchecked:

input[type="checkbox"]+* {
        font-weight: bold !important;
    }

    input[type="checkbox"]:checked+* {
        text-decoration: underline !important;
    }

Steps to update the color of checkbox labels

Answer №1

Answer №2

Answer №3

Similar questions

The duration of recorded audio in JavaScript is unclear

Using the power of jQuery and Ajax to smoothly transition to a different page after editing the value of

What causes React JS to continuously render in an infinite loop when using hooks and useState

What is the best way to send a promise back from my service to my controller?

Developing Your Own Local Variable in Angular with Custom Structural Directive ngForIn

Guide on displaying a real-time "Last Refreshed" message on a webpage that automatically updates to show the time passed since the last API request

The search button is malfunctioning after I submit search data and generate dynamic HTML using axios

Storing user input from a form into a MongoDB database using a webhook function

Tips for guaranteeing that the value is retained in an array when setting a Cookie in AEM/cq5

`vuetify sidebar with a nested menu``

What is the best way to format 100K to appear as 100,000?

Using CSS to automatically adjust the width of a child div based on its content, rather than stretching it to fill the entire

What could be causing the issue with the theme not functioning properly in Material-UI?

AngularJS Datepicker - calendar dropdown does not update when the model changes

Preventing click propagation for custom react components nested within a MapContainer

The AngularJs project is currently experiencing issues when trying to function as a single page web application

What could be causing the triggering of two AJAX requests in the given JavaScript code?

Managing key presses with functions in VueJs

Enhance User Experience by Implementing Event Listeners for Changing Link Visibility Using mouseover and getElementsBy

How can I include a nested object in an ng-repeat loop in Angular?