KokoaTalk Clone Coding: pseudo selector 3
<head>
<style>
body {
height: 1000vh;
}
input:optional { <->required
border: 1px solid thistle;
}
input:required {
border: 1px solid royalblue;
}
</style>
</head>
<body>
<div>
<form>
<input type="text" placeholder="username" />
<input type="password" required placeholder="password" />
</form>
</div>
</body>
input {
border: 1px solid thistle;
}
input:required {
border-color: royalblue;
}
look better!
add
input[placeholder="username"] {
background-color: lightgray;
}
input[type="password"] {
background-color: lightsteelblue;
}
<head>
<style>
body {
height: 1000vh;
margin: 50px;
}
input {
border: 1px solid thistle;
}
input:required {
border-color: royalblue;
}
input[placeholder~="name"] { contains the words 'name'
background-color: lightgray;
}
input[type="password"] {
background-color: lightsteelblue;
}
</style>
</head>
<body>
<div>
<form>
<input type="text" placeholder="First name" />
<input type="text" placeholder="Last name" />
<input type="password" required placeholder="password" />
</form>
</div>
</body>
differnce between '~=' and '*='
<form>
<input type="text" placeholder="First name" />
<input type="text" placeholder="Last name" />
<input type="text" placeholder="username" />
<input type="password" required placeholder="password" />
</form>
input[placeholder~="name"] {
background-color: lightgray;
}
input[placeholder*="name"] {
background-color: lightgray;
}
'~=name': (blank)name(blank)
'*='name': kkkkkkknamekkkkkkk