@mrjj
Thanks for the welcoming :-)

Indeed, the QStyledItemDelegate works fine, but only when I use a QTableWidget. So a first solution was to create a QTableWidget with 1 row and 1 column, and insert my delegate inside. The problem with this technique is that it's hard to perfectly mimic a QLineEdit (behavior, style, etc). For instance, with a QTableWidget, there is no simple click on items to enter in edit mode (this is a double click, at least), as far as I know. It's still possible to redefine the behavior, I guess, but it's not worth it. I don't like the whole thing.

That's why I came up with another idea. This time, I keep my QLineEdit as is, and I add/remove the input mask when having/losing focus. Thanks to that, I'm now able to see the "true" text (without mask format) when I'm not editing it (QLineEdit does not have the focus), while I can see the text (with mask format) when I'm editing it (has focus). I know it's not totally elegant, but I don't think there is an elegant solution at all for this "problem".

For those interested, a quick example on how to achieve this:
(1) install an event filter (installEventFilter()) on the QLineEdit
(2) filter on focus in/out
(2.1) focus in: add the mask (setInputMask())
(2.1) focus out: remove the mask and set the text to the value before the mask was removed (because removing the mask erases the text inside the QLineEdit)

Thanks, I tried the OpacityMask again as you suggested and it works now. It took me a bit to get it right, because i) I had a warning about the recursive property in ShaderEffectSource needing to be set to "true" and ii) the mask size needs to be the same as the source size for it to work properly. After a while I noticed that i) originated from some code in the contentItem of the button using the ColorOverlay (in fact it was the same problem there i.e. I tried to apply it to the parent). To fix ii) I used a transparent frame so that the code now looks something like:

background: Item{ width: control.width height: control.height Rectangle{ id: progressFrame anchors.fill: parent color: "transparent" visible: false Rectangle{ id: progressRect width: 0.7*parent.width height: parent.height anchors.verticalCenter: parent.verticalCenter anchors.left: parent.left color: "green" } } Rectangle { id: backgroundRect anchors.fill: parent radius: height / 2 color: "red" visible: true } OpacityMask{ anchors.fill: progressFrame source: progressFrame maskSource: backgroundRect } }

Resulting in:
0_1516730617237_960aab10-96cd-4f9e-b86d-afd96504a439-image.png

Thanks again!