HTML Prompt with strange shadow

I have this HTML prompt with a strange shadow:


Which line is causing this shadow?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        * {
            box-sizing: border-box;
        }
        body {
            background-color: transparent;
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .container {
            text-align: center;
            background-color: white;
            padding: 30px 20px;
            border-radius: 10px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
            width: 300px;
        }
        p {
            margin: 0 0 20px 0;
            font-size: 18px;
        }
        input[type="text"] {
            width: calc(100% - 20px);
            padding: 10px;
            margin: 10px 0;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        .buttons {
            margin-top: 20px;
        }
        .buttons button {
            padding: 10px 20px;
            font-size: 16px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin: 0 10px;
        }
        .buttons button.cancel {
            background-color: #f44336;
            color: white;
        }
        .buttons button.ok {
            background-color: #4CAF50;
            color: white;
        }
    </style>
</head>
<body data-kmwindow="310,290" onload="KMInit()">
    <div class="container">
        <p>Search Terms to compare:</p>
        <input type="text" id="FirstBox" placeholder="First Search Term">
        <input type="text" id="SecondBox" placeholder="Second Search Term">
        <div class="buttons">
            <button 
                class="cancel"
                name="Cancel" 
                type="button" 
                title="Press ESC to close the dialogue box"
                onclick="window.KeyboardMaestro.Cancel('Cancel')">
                Cancel
            </button>
            <button
                class="ok"
                name="OK"
                type="button"
                title="Click OK to compare the Frequency of the Search Terms"
                onclick="window.KeyboardMaestro.Submit('OK')">
                OK
            </button>
        </div>
    </div>
    <script>
        window.onload = () =>
            document.getElementById('FirstBox').focus();
        function KMInit() {
            const kmVar = window.KeyboardMaestro.GetVariable;

            document.getElementById("FirstBox").value = kmVar("Local_FirstTerm");
            document.getElementById("SecondBox").value = kmVar("Local_SecondTerm");
        }

        function KMWillCloseWindow() {
            const km = window.KeyboardMaestro;
            const boxValue = k => document.getElementById(k).value;

            km.SetVariable("Local_updatedFirstTerm", boxValue("FirstBox"));
            km.SetVariable("Local_updatedSecondTerm", boxValue("SecondBox"));
        }
    </script>
</body>
</html>

I'm not seeing that on my system. Just a clean prompt. I know this doesn't solve your issue.

I'm only seeing it if I spawn the prompt then change focus to something else.

It's not your HTML, it's an artefact of the windowing system. Try turning on "Resizable" in the "Custom HTML Prompt" options -- that helped for me.

1 Like