Style select tag with css houdini Paint API

Question

I've came across this new feature in css called css Houdini. I'm just wondering if there's any way that we can style the select tag using css houdini paint API. I've tried with this code snippet. Any helps would be appreciated. Thanks in advance.

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

script

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

Sure you can, your script has a Syntax error: 100% isn't valid JavaScript.

You probably wanted 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>