@InkoGnito123

Нажатие на картинку обводится, как убрать?

При нажатии на бокс он обводится как какой-то квадрат, мне нужно, чтобы только как картинка была, а там появляется ещё что-то вокруг.

Код:
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Site test</title>
    <link rel="icon" type="image/svg+xml" href="/favicon.ico">
    <link rel="stylesheet" href="/static/css/styles.css">
</head>
<body>
    <div id="root"></div>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel" src="/static/js/app.js"></script>
</body>
</html>


const { useState, useEffect } = React;

function App() {
    const [showCase, setShowCase] = useState(false);
    const [caseNumber, setCaseNumber] = useState(null);
    const [isOpening, setIsOpening] = useState(false);

    const handleSection1Click = () => {
        setShowCase(true);
        setCaseNumber(null);
    };

    const handleCaseClick = () => {
        if (!isOpening) {
            setIsOpening(true);
            setTimeout(() => {
                const randomNumber = Math.floor(Math.random() * 100) + 1;
                setCaseNumber(randomNumber);
                setIsOpening(false);
            }, 2000);
        }
    };

    return (
        <div className="app-container">
            <div className="content">
                <h1>Open Box!</h1>
                {showCase && (
                    <div className="case-container">
                        <p className="case-instruction">
                            {isOpening ? 'Открываем бокс...' : (caseNumber ? `Выпало: ${caseNumber}` : 'Нажмите на бокс')}
                        </p>
                        <button class="case-wrapper" onClick={handleCaseClick}>
                            <img 
                                src={isOpening ? "/static/icons/boxopen.png" : "/static/icons/boxclose.png"}
                                alt={isOpening ? "Открытый бокс" : "Закрытый бокс"}
                                className="case-image"
                            />
                        </button>
                    </div>
                )}
            </div>
            <div className="footer">
                <button className="button" onClick={handleSection1Click}>Раздел 1</button>
                <button className="button">Раздел 2</button>
                <button className="button">Раздел 3</button>
            </div>
        </div>
    );
}

ReactDOM.render(<App />, document.getElementById('root'));

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: Arial, sans-serif;
}

.app-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #f0f0f0;
}

.content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

h1 {
    color: #333;
    margin-bottom: 20px;
}

.case-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.case-instruction {
    margin-bottom: 10px;
    font-size: 18px;
    color: #555;
}

.case-wrapper {
    position: relative;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
}

.case-image {
    display: block;
    width: 200px;
    height: auto;
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
}

.case-wrapper:active {
    transform: scale(0.98);
    transition: transform 0.1s;
}

.case-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
}

.case-wrapper:focus {
    outline: none;
}

.case-wrapper::-moz-focus-inner {
    border: 0;
}

.footer {
    background-color: #333;
    padding: 20px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.button:hover {
    background-color: #45a049;
}

66eaa126b017d108991468.jpeg
  • Вопрос задан
  • 94 просмотра
Решения вопроса 1
grantur5707
@grantur5707
Full Stack Web Developer
.case-wrapper {
    position: relative;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    box-shadow: none;
}

.case-wrapper:focus {
    outline: none;
    box-shadow: none;
}

.case-wrapper::-moz-focus-inner {
    border: 0;
}
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы