使用css houdini API的样式选择标签

Question

我偶然发现了css中的这个新特性，叫做css Houdini。我想知道是否有任何方法可以使用css houdini 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 and 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>

​