Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/mcleod-reset.css">
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <div id="atf">
        <div id="stepper">
            <button id="stepper-minus">&minus;</button>
            <input id="stepper-val" type="text" name="val" value="32">
            <button id="stepper-plus">&plus;</button>
            <!-- <div id="stepper-minus">&minus;</div>
            <div id="stepper-val">42</div>
            <div id="stepper-plus">&plus;</div> -->
        </div>
    </div>
</body>
</html>
 
html {
    font-family: Arial, Helvetica, sans-serif;
    /* font-size: 3vw; */
}
html,
body,
div,
button,
input {
    box-sizing: border-box;
}
#atf {
    height: 100vh;
    /* flex-container */
    display: flex;
    justify-content: center;
    align-items: center;
}
#stepper {
    /* flex-container */
    display: flex;
    /* formatting */
    width: 12rem;
    height: 2rem;
}
/* #stepper>* {
    min-width: 0;
    overflow: hidden;
} */
#stepper-minus {
    /* flex-item */
    flex-grow: 1;
    /* flex-container */
    display: flex;
    justify-content: center;
    align-items: center;
    /* formatting */
    background-color: deepskyblue;
    border: 1px solid lightgray;
    border-radius: .6rem 0 0 .6rem;
    cursor: pointer;
}
#stepper-val {
    /* flex-item */
    flex-grow: 2;
    /* flex-container */
    text-align: center;
    /* formatting */
    border-top: 1px solid lightgray;
    border-bottom: 1px solid lightgray;
    border-left: none;
    border-right: none;
    width: 0;
}
#stepper-plus {
    /* flex-item */
    flex-grow: 1;
    /* flex-container */
    display: flex;
    justify-content: center;
    align-items: center;
    /* formatting */
    background-color: deepskyblue;
    border: 1px solid lightgray;
    border-radius: 0 .6rem .6rem 0;
    cursor: pointer;
}
#stepper>button:hover {
    background-color: blue;
}
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers