samples/vue-todo
3
0
Fork 1
Code Issues 1 Pull Requests Packages Projects Releases 2 Wiki Activity

dropdown style

Browse Source
This commit is contained in:
Markus Thielen 2023-03-13 14:50:02 +01:00
parent 5576a46537
commit dc3fb83819
Signed by: markus
GPG Key ID: 3D4980D3EC9C8E26
2 changed files with 18 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/assets/main.scss
View File

@ -96,3 +96,18 @@ form .error {
margin: 25px 0 0 0; margin: 25px 0 0 0;
} }
select.form-control:not([multiple]) {
cursor: pointer;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAI9JREFUeNpiZACCyMjIBCDVD8SOy5cvv8BAAgDqNQBS+4G4EKh3ASPUsPlQ+Q+kGIpkmABUKJEJ6jIYAEnshyok1TAQ6AcZ6Ah1GdGG4jAM7DtGQgrQvU9ILSOxColVw0is7VA2QV8wkhA+DMQECSMJgc5AyDCcBhIwFG9aZSQxrRFM+IwkJGAGYnIRQIABACQuXCKovu2mAAAAAElFTkSuQmCC);
background-size: 1rem;
background-repeat: no-repeat;
background-position: calc(100% - 1rem) center;
padding: .5em 3em .5em 1em;
background-color: var(--color-background);
color: var(--color-text);
border: 1px solid var(--color-border);
border-radius: .4rem;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

5
src/components/TodoRoot.vue
View File

@ -18,9 +18,9 @@
Show completed Show completed
</label> </label>
<div class="form-control"> <div>
<label for="list-selector">List: </label> <label for="list-selector">List: </label>
<select id="list-selector" v-model="currentList"> <select id="list-selector" class="form-control" v-model="currentList">
<option :value="0">All</option> <option :value="0">All</option>
<option v-for="item in lists" :key="item.id" :value="item.id">{{ item.title }}</option> <option v-for="item in lists" :key="item.id" :value="item.id">{{ item.title }}</option>
</select> </select>
@ -337,5 +337,6 @@ h1 {
#filter-form { #filter-form {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center;
} }
</style> </style>