0

我在 css 中遇到了这个名为 css Houdini 的新功能。我只是想知道是否有任何方法可以使用 css houdini paint API 设置选择标签的样式。我试过这个代码片段。任何帮助将不胜感激。提前致谢。

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);

密码笔

4

1 回答 1

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>

于 2020-04-03T09:57:02.607 回答