53 lines
1.5 KiB
HTML
53 lines
1.5 KiB
HTML
<style>
|
|
|
|
button:hover {
|
|
background-color: blue;
|
|
color: white;
|
|
}
|
|
|
|
button:active::before {
|
|
content: "Bouton cliqué";
|
|
}
|
|
|
|
input:empty {
|
|
border: 2px solid grey;
|
|
font-size: 13px;
|
|
padding-left: 7px;
|
|
padding-right: 7px;
|
|
border-radius: 9px;
|
|
width:100%;
|
|
height:30px;
|
|
}
|
|
input:valid:not(:placeholder-shown) {
|
|
border: 2px solid green;
|
|
font-size: 13px;
|
|
padding-left: 7px;
|
|
padding-right: 7px;
|
|
border-radius: 9px;
|
|
width:100%;
|
|
height:30px;
|
|
}
|
|
input:invalid {
|
|
border: 2px solid red;
|
|
font-size: 13px;
|
|
padding-left: 7px;
|
|
padding-right: 7px;
|
|
border-radius: 9px;
|
|
width:100%;
|
|
height:30px;
|
|
}
|
|
</style>
|
|
|
|
<!-- L'élément input suivant aura une bordure grise s'il est vide, verte s'il contient une valeur valide, ou rouge s'il contient une valeur qui ne respecte pas le format défini par la regex -->
|
|
<input type="text" pattern="^https://open\.spotify\.com/(?:album|playlist)/[\w-]+(?:\?si=[\w-]+)$" placeholder="url"/>
|
|
<button id="mon-bouton">Mon bouton</button>
|
|
<script>
|
|
// Récupère l'élément bouton grâce à son ID
|
|
const bouton = document.getElementById('mon-bouton');
|
|
|
|
// Ajoute un écouteur d'événement 'click' au bouton
|
|
bouton.addEventListener('click', function() {
|
|
// Met à jour la valeur de l'attribut innerHTML du bouton
|
|
this.innerHTML = "Bouton cliqué";
|
|
});
|
|
</script> |