使用css houdini Paint API的样式选择标记

Question

我在css中发现了这个名为css Houdini的新功能。我只是想知道是否有任何方法可以使用css houdini paint API来设置select标记的样式。我已经尝试过这个代码片段。任何帮助都将不胜感激。提前谢谢。

Html-

<select>
<option value="">Apple</option>
<option value="">Orange</option>
<option value="">Grapes</option>
<option value="">Pappaya</option>
<option value="">Avacado</option>
</select>

css

select {
-webkit-appearance: none;
-moz-appearance:    none;
appearance:         none;
background-image: paint(selectDropdown);
}

脚本

class DropdownStyles {
paint(ctx, geom, properties) {
ctx.strokeStyle = 'red';
ctx.fillStyle = 'blue';
ctx.beginPath();
ctx.rect(0, 0, 100%, 100%);
ctx.stroke();
ctx.fill();
}
}
registerPaint('selectDropdown', DropdownStyles);

Codepen

Answer 1

当然可以，您的脚本有语法错误：100%不是有效的JavaScript。

您可能想要PaintSize.width和PaintSize.height:

const worklet_url = blobifyScript(`
class DropdownStyles {
paint (ctx, geom, properties) {
ctx.strokeStyle = 'red';
ctx.fillStyle = 'blue';
ctx.beginPath();
ctx.rect(0, 0, geom.width, geom.height);
ctx.fill();
ctx.stroke();
}
}
registerPaint('selectDropdown', DropdownStyles);
`);
CSS.paintWorklet.addModule( worklet_url )
.catch( console.error );
function blobifyScript( content ) {
return URL.createObjectURL( new Blob ( [ content ], { type: 'application/javascript' } ) )
}

select {
background-image: paint(selectDropdown);
}

<select>
<option value="">Apple</option>
<option value="">Orange</option>
<option value="">Grapes</option>
<option value="">Pappaya</option>
<option value="">Avacado</option>
</select>