I want to change color of checkbox values like if it's checked it shows text in green if its unchecked it shows color in red here is simple input type
but I am not sure how I color these true-value and false-value if someone knows please help, Thanks! P.S I have put the whole code now if that be helpful for people to understand my problem.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
<!--
@import url("css/tablestyle.css");
@import url("css/form.css");
-->
</style>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">
</script>
<style>
.true-value {
color: Green;
}
.false-value {
color: Red;
}
.btn-danger {
background-color: transparent;
border: 1px solid #3498db;
}
</style>
</head>
<body>
<div id="app" >
<h2>Student Information Collection</h2>
<hr>
<div >
<form @submit.prevent="addStudent">
<div >
<label for="name">Student Name:</label><input id="name" type="text" required v-model="student.name">
</div>
<label >Gender:</label >
Male<input type="radio" v-model="student.gender" value="male" >
Female<input type="radio" v-model="student.gender" value="female">
<br /><br />
<label for="age">Age:</label><input id="age" type="number" v-model="student.age"> <br /><br />
<label>Country:</label>
<select v-model="student.country">
<option disabled selected value="">Please select your country</option>
<option v-for="country in countries"></option>
<option>{{country.China}}</option>
<option>{{country.Zambia}}</option>
<option>{{country.Pakistan}}</option>
<option>{{country.Bangladesh}}</option>
<option>{{country.India}}</option>
</select>
<label >Hobby:</label>
<span ><input type="checkbox" v-model="student.hobby" value="Studying"> Studying</span>
<span ><input type="checkbox" v-model="student.hobby" value="Play Video Games" >Play Video Games</span>
<span ><input type="checkbox" v-model="student.hobby" value="Travelling">Travelling</span>
<span ><input type="checkbox" v-model="student.hobby" value="Eating" >Eating</span>
<br /><br />
<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" >Add a new student</button>
</form>
</div>
<h2>Students list</h2>
<hr>
<table id="rounded-corner">
<thead>
<th >Name</th>
<th>Gender</th>
<th>Age</th>
<th>Country</th>
<th>Hobby</th>
<th>Receive Promotions</th>
<th >Operation</th>
</thead>
<tbody>
<tr v-for="(student, index) in students">
<td>{{student.name}}</td>
<td>{{student.gender}}</td>
<td>{{student.age}}</td>
<td>{{student.country}}</td>
<td>{{student.hobby}}</td>
<td>{{student.agree}}</td>
<td><button type="button" @click="removeTask(index)">Delete</button></td>
</tr>
</tbody>
</table>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
student: {
name: "",
gender: "male",
age: 0,
country: "",
hobby: [],
otherInformation: "",
agree: ""
},
students: [{
name: "Mike",
gender: "male",
age: 23,
country: "ZM",
hobby: ["Studying"],
otherInformation: "I want say nothing but try your best.",
agree: "I Don't want to receive promotions"
},
{
name: "Emma",
gender: "famale",
age: 18,
country: "PK",
hobby: ["Playing Game",
"Travelling"
],
otherInformation: "Please contact me anytime.",
agree: "I want to receive promotions"
},
{
name: "Emily",
gender: "famale",
age: 20,
country: "BD",
hobby: ["Studying", "Eating", "Travelling"],
otherInformation: "Tell me your problem.",
agree: "I Don't want to receive promotions"
}
],
country: {
China: "CN",
Zambia: "ZM",
Bangladesh: "BD",
India: "IN",
Pakistan: "PK"
},
hobbies: ["Studying", "Playing Game", "Eating", "Travelling"]
},
methods: {
addStudent() {
this.students.push({name: this.student.name ,gender: this.student.gender,age: this.student.age, country: this.student.country, hobby: this.student.hobby, otherInformation: this.student.otherInformation,agree: this.student.agree})
} ,
removeTask: function(index) {
this.students.splice(index, 1);
}
}
});
</script>
</body>
</html>
CodePudding user response：
First of all put text in semantic HTML like the label and then put the below code to target the input on the check and uncheck
input[type="checkbox"] * { color: red !important; } input[type="checkbox"]:checked * { color: green !important; }
CodePudding user response：
<style>
input:checked {
colour: green;
background-color: green;
}
input {
colour: red;
background-color: red;
}
</style>CodePudding user response：
I don't know vue, but you can do it in plain html and css
<!DOCTYPE html>
<html>
<style>
/* The container */
.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 the browser's default checkbox */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #F00;
}
/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #00FF00;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.container .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
</style>
<body>
<h1>Custom Checkboxes</h1>
<label >One
<input type="checkbox" checked="checked">
<span ></span>
</label>
<label >Two
<input type="checkbox">
<span ></span>
</label>
<label >Three
<input type="checkbox">
<span ></span>
</label>
<label >Four
<input type="checkbox">
<span ></span>
</label>
</body>
</html>CodePudding user response：
You can use computed property:
new Vue({
el: '#demo',
data() {
return {
student: {
name: "",
gender: "male",
age: 0,
country: "",
hobby: [],
otherInformation: "",
agree: ""
},
}
},
computed: {
colorIt() {
let textColor = { text: "I Don't want to receive promotions", color: "red"}
return this.student.agree ? textColor = {text: "I want to receive promotions", color: "green"} : textColor
},
},
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<span>Agree receive our promotions.</span><br>
<input id="agree" type="checkbox" v-model="student.agree" :style="`accent-color: ${colorIt.color}`">
<label for="agree" :style="`color: ${colorIt.color}`">{{ colorIt.text }}</label>
</div>