kar
/
phaser-game-bs
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

change cross symbol X

pull/2/head
dev sp 2024-01-02 15:23:46 +00:00
parent f26075d236
commit d3b4088a43
2 changed files with 70 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/pages/cross/v1.astro
View File

@ -188,6 +188,41 @@ import Layout from "../../layouts/Layout.astro";
</script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Quicksand:wght@500;700&display=swap');
input[type="checkbox"]{
-webkit-appearance: initial;
appearance: initial;
border: 1px solid gray;
border-radius: 5px;
/* background: gray; */
width: 40px;
height: 40px;
position: relative;
}
input[type="checkbox"]:checked {
background: blue;
}
input[type="checkbox"]:checked:after {
content: "X";
color: #fff;
border: none;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
/*
* If you want to fully change the check appearance, use the following:
* content: " ";
* width: 100%;
* height: 100%;
* background: blue;
* top: 0;
* left: 0;
*/
}
body{
font-family: Quicksand;
}

35
src/pages/cross/v2.astro
View File

@ -222,6 +222,41 @@ import Layout from "../../layouts/Layout.astro";
</script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Quicksand:wght@500;700&display=swap');
input[type="checkbox"]{
-webkit-appearance: initial;
appearance: initial;
border: 1px solid gray;
border-radius: 5px;
/* background: gray; */
width: 40px;
height: 40px;
position: relative;
}
input[type="checkbox"]:checked {
background: blue;
}
input[type="checkbox"]:checked:after {
border: none;
content: "X";
color: #fff;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
/*
* If you want to fully change the check appearance, use the following:
* content: " ";
* width: 100%;
* height: 100%;
* background: blue;
* top: 0;
* left: 0;
*/
}
body{
font-family: Quicksand;
}