[IDEA] New CSS selector for suggestion-item when allowCustomInput=true #518
Closed
FelipeRearden
started this conversation in
Ideas
Replies: 2 comments 8 replies
-
|
@FelipeRearden Try this and see if it works for your case: .prompt.note-toolbar-ui[data-ntb-ui-type="suggester"]:has(.prompt-results > *):has(.prompt-input-container > input:not(:placeholder-shown)) .ntb-suggester-input-icon {
color: green;
} |
Beta Was this translation helpful? Give feedback.
4 replies
-
|
@FelipeRearden Check the latest release. I added the class to the suggestion item: .prompt.note-toolbar-ui[data-ntb-ui-type="suggester"]:has(.suggestion-item.is-selected.ntb-is-custom-input) .ntb-suggester-input-icon {
color: green;
} |
Beta Was this translation helpful? Give feedback.
4 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment






Uh oh!
There was an error while loading. Please reload this page.
-
Hello @chrisgurney !!!!
For some reason I miss this “old” feature:

And now I am thrilled about this feature, this is special!
The idea is simple to explain: a new CSS class to deal/treat the cases where
suggestion-item.is-selectedhas a custom input based onallowCustomInputparameter.Let me use an example to present my idea:
This is simple suggester:
the user will type
duckwhich is NOT is the listWhen
allowCustomInput: falsewe have.suggestion-emptyto signal that the input is not feasible.A simple CSS snippet could make possible to use the new suggester icon as an alert
My Idea
My idea is to apply the same approach presented above when
allowCustomInput: trueFollowing my example, the idea is to apply a diffferent color
greento the suggester whenallowCustomInput: trueI don’t know if my idea is feasible.
The idea here is to use
.ntb-suggester-input-iconto help the user to know that the input is not on the list and to achieve this type of help, we need a CSS class to target.suggestion-item.is-selectedonly whenallowCustomInput: trueis enable insideprompt-resultsI use
.ntb-suggester-input-iconas an example because is easy to see but I have one more complex idea for this new CSS selector :)Let me know what you think!
I wish you a fantastic day ☀️
Beta Was this translation helpful? Give feedback.
All reactions