Mkdocs-material: I'd like CSS rules for form elements in the body

[emsenn]

Description

This isn't a bug but a request; one you should feel free to ignore; it's a feature I want that I'd be willing to implement myself, I'm just a little short on technical know-how, and think it might be generally more useful.

But, what I'd like is for form elements to have some different styling if used in the body. Right now, they're quite indistinguishable from normal text - I assume that's because of rules for the search bar.

Expected behavior

Again, this is the expected behavior, I didn't expect a static site theme catered toward documentation to be able to handle stylish forms.

Actual behavior

Forms look real bland - mostly, nothing has a border, so it doesn't look clearly clickable.

Steps to reproduce the bug

1. Put a form on your page
2. Render it
3. Get confused trying to find the form.

Package versions

Using gitlab-ci so I can't check this at a glance, but if it's necessary I'll figure out how to go fetch it.

Project configuration

site_name: Holistic Project Management 
site_description: A system-agnostic project management method.
site_author: emsenn
repo_name: 'source'
repo_url: https://gitlab.com/emsenn/holistic-project-management/
pages:
    - Home: index.md
theme:
    name: 'material'
    palette:
        primary: 'grey'
        accent: 'teal'
    feature:
        tabs: true
markdown_extensions:
    - admonition
    - codehilite:
        guess_lang: false
    - toc:
        permalink: true

System information

• OS: To view? Windows. To build? Alpine, I think.
• Browser: Chrome

---

Again, I wanna stress, please feel free to close this if it's not something you'd like to address. (PS I absolutely love this theme, and how beautiful it looks while leaving the markdown so clean.)

[squidfunk]

Somebody asked for this before, but this is indeed a very, very low priority issue which will probably never get implemented. Could you elaborate on use cases for using forms in documentation?

[squidfunk]

BTW: you could easily drop in a CSS framework of your choice to style forms as Material scopes all CSS classes so it should not interfere with third-party CSS.

[emsenn]

My use cases are 1) sign up for mailing list notifications about when this documentation is updated, and 2) collect feedback on if there were issues with the documentation, at the end of a section.

I respect that this is low-priority, but unfortunately don't quite have the technical skills to understand your second comment. However, I am interested in learning more about CSS (specifically modifying CSS of existing themes) so I'll be looking at if I can't implement this on my own.

Thanks for your fast response, and again, I want to emphasize how much I love this theme!

[max-ci]

@emsenn

You can just include 3rd party library to your configuration file.

For example https://github.com/electerious/formbase (demo)

Link to CSS file: https://s.electerious.com/formbase/dist/formbase.min.css

Then you can just include HTML form in your Markdown files.

<label class="label" for="sex">Sex</label>
<select class="select" id="sex" name="sex">
    <option selected disabled>-</option>
    <option value="male">Male</option>
    <option value="female">Female</option>
</select>

<label class="label" for="country">Country</label>
<select class="select" id="country" name="country" disabled>
    <option value="germany">Germany</option>
    <option value="france">France</option>
</select>

<label class="label" for="givenname">Given name</label>
<input class="input" id="givenname" name="givenname" type="text" autocorrect="off" autocomplete="given-name" placeholder="Timothy">

<label class="label" for="additionalname">Additional name</label>
<input class="input" id="additionalname" name="additionalname" type="text" autocorrect="off" autocomplete="additional-name" placeholder="John">

<label class="label" for="familyname">Family name</label>
<input class="input" id="familyname" name="familyname" type="text" autocorrect="off" autocomplete="family-name" placeholder="Berners-Lee">

<label class="label" for="company">Company</label>
<input class="input" id="company" name="company" type="text" autocorrect="off" autocomplete="organization" placeholder="World Wide Web Consortium">

<label class="label" for="street">Street</label>
<input class="input" id="street" name="street" type="text" autocorrect="off" autocomplete="address-line1" placeholder="32 Vassar Street">

<label class="label" for="postalcode">Postal code</label>
<input class="input" id="postalcode" name="postalcode" type="text" pattern="\d*" novalidate autocorrect="off" autocomplete="postal-code" placeholder="02139">

<label class="label" for="city">City</label>
<input class="input" id="city" name="city" type="text" autocorrect="off" autocomplete="address-level2" placeholder="Cambridge">

<label class="label" for="tel">Phone</label>
<input class="input" id="tel" name="tel" type="tel" autocorrect="off" autocomplete="tel" placeholder="[phone]">

<label class="label" for="email">E-Mail</label>
<input class="input" id="email" name="email" type="email" autocapitalize="off" autocorrect="off" autocomplete="email" placeholder="[email protected]">

<label class="label" for="countrycode">Country code</label>
<input class="input" id="countrycode" name="countrycode" type="text" autocapitalize="off" autocorrect="off" autocomplete="country" placeholder="DE">

<label class="label" for="countryname">Country name</label>
<input class="input" id="countryname" name="countryname" type="text" autocomplete="country" placeholder="Germany">

<label class="label" for="birthday">Birthday</label>
<input class="input" id="birthday" name="birthday" type="date" autocorrect="off" autocomplete="bday" placeholder="YYYY-MM-DD" disabled>

<label class="label" for="file">File</label>
<input class="input" id="file" name="file" type="file">

<label class="label" for="message">Message</label>
<textarea class="input" id="message" name="message" rows="8" cols="40"></textarea>

<div class="control">
    <input class="control__input" id="optionone" type="radio" name="option" value="optionone" checked>
    <label class="control__label" for="optionone">Option One</label>
</div>

<div class="control">
    <input class="control__input" id="optiontwo" type="radio" name="option" value="optiontwo">
    <label class="control__label" for="optiontwo">Option Two</label>
</div>

<div class="control">
    <input class="control__input" id="optionthree" type="radio" name="option" value="optionthree" disabled>
    <label class="control__label" for="optionthree">Option Three</label>
</div>

<div class="control">
    <input class="control__input" id="checkone" type="checkbox" name="checkone" value="checkone" checked>
    <label class="control__label" for="checkone">Check One</label>
</div>

<div class="control">
    <input class="control__input" id="checktwo" type="checkbox" name="checktwo" value="checktwo">
    <label class="control__label" for="checktwo">Check Two</label>
</div>

<div class="control">
    <input class="control__input" id="checkthree" type="checkbox" name="checkthree" value="checkthree" disabled>
    <label class="control__label" for="checkthree">Check Three</label>
</div>

<div class="control">
    <input class="control__input" id="checkfour" type="checkbox" name="checkfour" value="checkfour" checked disabled>
    <label class="control__label" for="checkfour">Check Four</label>
</div>

[emsenn]

This is a case of me not knowing what I didn't know, after taking some time to read back through this theme's own documentation, I see that including custom CSS is clearly explained and truly a trivial thing.

I appreciate the thorough and considerate responses. I don't know proper procedure for this repo and so am not going to close the issue in case there's any tagging the maintainer wants to do, but, I consider this resolved.

[squidfunk]

Okay, great :-)