對齊問題和引導按鈕修改-有解無憂

嗨，我有一個定制設計要制作：

對齊問題和引導按鈕修改

當前的實作如下所示：對齊問題和引導按鈕修改

如何使用 css 制作第一個名為 manedlig 捐贈和 enkel 捐贈的按鈕以使用該箭頭指標？我也無法進行相同的水平對齊，它們看起來沒有對齊

我的代碼是：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo form</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev nYRRuWlolflfl" crossorigin="anonymous">
    <!-- jQuery UI autocomplete CSS -->
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css"
        integrity="sha512-mSYUmp1HYZDFaVKK//63EcZq4iFWFjxSL Z3T/aCt4IO9Cejm03q3NKKYN6pFQzY0SBOr8h eCIAZHPXcpZaNw=="
        crossorigin="anonymous" />
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Poppins" />

    <style>
        /* Overriding Styles */
        .radio-toolbar {
            margin: 10px 0px;
        }

        .radio-toolbar input[type="radio"] {
            opacity: 0;
            /* position: fixed; */
            width: 0;
        }

        .radio-toolbar label {
            display: inline-block;
            background-color: white;
            padding: 5px 22px;
            font-family: sans-serif, Arial;
            font-size: 16px;
            border: 1px solid #E7E7E7;
            border-radius: 0px;
        }

        .radio-toolbar label:hover {
            background-color: #E7E7E7;
        }

        /* .radio-toolbar input[type="radio"]:focus label {
            border: 2px dashed #444;
        } */

        .radio-toolbar input[type="radio"]:checked label {
            background-color: #C8951C;
            color: white;
            border: none;
        }

        #basic-addon2 {
            background-color: white;
        }

        input[type="text"] {
            text-align: center;
        }

        #amount::placeholder {

            /* Firefox, Chrome, Opera */
            text-align: center;
            margin-left: 20px !important;
        }

        input {
            border-radius: 0
        }

        .custom-btn {
            position: relative;
            display: inline-block;
            width: auto;
            height: auto;
            background-color: transparent;
            border: none;
            cursor: pointer;
            min-width: 150px;
        }

        .custom-btn span {
            position: relative;
            display: inline-block;
            font-size: 14px;
            font-weight: bold;
            letter-spacing: 2px;
            text-transform: uppercase;
            top: 0;
            left: 0;
            width: 100%;
            padding: 15px 20px;
            transition: 0.3s;
        }

        .custom-btn-2::before {
            background-color: #C8951C;
            transition: 0.3s ease-out;
        }

        .custom-btn-2 span {
            color: #C8951C;
            border: 1px solid #C8951C;
            transition: 0.2s;
        }

        .custom-btn-2 span:hover {
            color: rgb(255, 255, 255);
            background-color: #C8951C;
            transition: 0.2s 0.1s;
        }

        .custom-btn.hover-opacity::before {
            top: 0;
            bottom: 0;
            right: 0;
            height: 100%;
            width: 100%;
            opacity: 0;
        }

        .custom-btn.hover-opacity:hover::before {
            opacity: 1;
        }
    </style>
</head>

<body style="background-color: #fbf9f7;">
    <div class="container-fluid text-center">
        <div class="row">
            <div class="col-md-6 mx-auto mt-2">
                <form id="form_submit">
                    <div class="radio-toolbar mb-5">
                        <input type="radio" id="monthly" name="frekvens" value="monthly" checked>
                        <label for="monthly">M?nedlig donation</label>

                        <input type="radio" id="one-time" name="frekvens" value="one-time">
                        <label for="one-time">Enkel donation</label>
                    </div>
                    <div class="radio-toolbar" id="monthly-donation-block">
                        <input type="radio" id="amount-29" name="monthly-belob" value="29">
                        <label for="amount-29">29 DKK</label>

                        <input type="radio" id="amount-49" name="monthly-belob" value="49" checked>
                        <label for="amount-49">49 DKK</label>

                        <input type="radio" id="amount-79" name="monthly-belob" value="79">
                        <label for="amount-79">79 DKK</label>
                    </div>
                    <div class="radio-toolbar" id="one-time-donation-block" style="display: none;">
                        <input type="radio" id="amount-99" name="one-time-belob" value="99">
                        <label for="amount-99">99 DKK</label>

                        <input type="radio" id="amount-149" name="one-time-belob" value="149" checked>
                        <label for="amount-149">149 DKK</label>

                        <input type="radio" id="amount-199" name="one-time-belob" value="199">
                        <label for="amount-199">199 DKK</label>
                    </div>
                    <div class="input-group mb-5">
                        <input type="text" class="form-control num-only auto-ok" id="belob" placeholder="Valgfrit bel?b"
                            aria-label="Recipient's username" aria-describedby="basic-addon2">
                        <span class="input-group-text" id="basic-addon2">DKK</span>
                        <div id="belob-feedback" class="invalid-feedback">
                            Incorrect Number
                        </div>
                    </div>
                    <div class="mb-3">
                        <input type="text" class="form-control num-only" id="phone" placeholder="Telefonnummer" required
                            maxlength="10">
                    </div>
                    <div class="d-grid gap-2">
                        <button type="submit" class="custom-btn custom-btn-2 hover-opacity">
                            <span>FORTS?T</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
<!-- These two are required unless jQuery & bootstrap is already included -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
    integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP u1T9qYdvdihz0PPSiiqn/ /3e7Jo4EaG7TubfWGUrMQ=="
    crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
    integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG"
    crossorigin="anonymous"></script>
<!-- This is required for autocomplete api -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" type="text/javascript"></script>
<script src="https://cdn.dataforsyningen.dk/dawa/assets/dawa-autocomplete2/1.0.2/dawa-autocomplete2.min.js"></script>
<!-- this is required for debounce delay of input field -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"
    integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG ljU96qKRCWh quCY7yefSmlkQw1ANQ=="
    crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"
    integrity="sha512-T/tUfKSV1bihCnd MxKD0Hm1uBBroVYBOYSk1knyvQ9VyZJpc/ALb4P0r6ubwVPSGB2GvjeoMAJJImBG12TiaQ=="
    crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js"
    integrity="sha512-LGXaggshOkD/at6PFNcp2V2unf9LzFq6LE sChH7ceMTDP0g2kn6Vxwgg7wkPP7AAtX lmPqPdxB47A0Nz0cMQ=="
    crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.all.min.js"></script>
</html>

請幫忙！字體型別可以忽略

uj5u.com熱心網友回復：

您可以添加一個::after來創建指標

      .radio-toolbar input[type="radio"]:checked label.with-pointer::after {
        content: '';
        width: 16px;
        height: 16px;
        background: #C8951C;
        position: absolute;
        bottom: 0;
        left: 50%;
        z-index: -1;
        transform: translate(-50%, 8px) rotate(
45deg);
      }

對齊也可以通過容器上的 flex 屬性來實作：

在此處查看完整代碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo form</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev nYRRuWlolflfl" crossorigin="anonymous">
    <!-- jQuery UI autocomplete CSS -->
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css"
        integrity="sha512-mSYUmp1HYZDFaVKK//63EcZq4iFWFjxSL Z3T/aCt4IO9Cejm03q3NKKYN6pFQzY0SBOr8h eCIAZHPXcpZaNw=="
        crossorigin="anonymous" />
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Poppins" />

    <style>
        /* Overriding Styles */
        .radio-toolbar {
          margin: 10px 0px;
          display: flex;
        }

        .radio-toolbar input[type="radio"] {
            opacity: 0;
            /* position: fixed; */
            width: 0;
        }

        .radio-toolbar label {
            display: inline-block;
            background-color: white;
            padding: 5px 22px;
            font-family: sans-serif, Arial;
            font-size: 16px;
            border: 1px solid #E7E7E7;
            border-radius: 0px;
            flex:1;
            margin-right: 8px;
        }
      
      .radio-toolbar label:last-child {
        margin-right: 0;
      }

        .radio-toolbar label:hover {
            background-color: #E7E7E7;
        }

        /* .radio-toolbar input[type="radio"]:focus label {
            border: 2px dashed #444;
        } */

        .radio-toolbar input[type="radio"]:checked label {
            background-color: #C8951C;
            color: white;
            border: none;
            position: relative;
        }

      .radio-toolbar input[type="radio"]:checked label.with-pointer::after {
        content: '';
        width: 16px;
        height: 16px;
        background: #C8951C;
        position: absolute;
        bottom: 0;
        left: 50%;
        z-index: -1;
        transform: translate(-50%, 8px) rotate(
45deg);
      }
      
     
        #basic-addon2 {
            background-color: white;
        }

        input[type="text"] {
            text-align: center;
        }

        #belob::placeholder {

            /* Firefox, Chrome, Opera */
            margin-left: -58px !important;
        }

        input {
            border-radius: 0
        }

        .custom-btn {
            position: relative;
            display: inline-block;
            width: auto;
            height: auto;
            background-color: transparent;
            border: none;
            cursor: pointer;
            min-width: 150px;
padding: 0px;
        }

        .custom-btn span {
            position: relative;
            display: inline-block;
            font-size: 14px;
            font-weight: bold;
            letter-spacing: 2px;
            text-transform: uppercase;
            top: 0;
            left: 0;
            width: 100%;
            padding: 15px 20px;
            transition: 0.3s;
        }

        .custom-btn-2::before {
            background-color: #C8951C;
            transition: 0.3s ease-out;
        }

        .custom-btn-2 span {
            color: #C8951C;
            border: 1px solid #C8951C;
            transition: 0.2s;
        }

        .custom-btn-2 span:hover {
            color: rgb(255, 255, 255);
            background-color: #C8951C;
            transition: 0.2s 0.1s;
        }

        .custom-btn.hover-opacity::before {
            top: 0;
            bottom: 0;
            right: 0;
            height: 100%;
            width: 100%;
            opacity: 0;
        }

        .custom-btn.hover-opacity:hover::before {
            opacity: 1;
        }
    </style>
</head>

<body style="background-color: #fbf9f7;">
    <div class="container-fluid text-center">
        <div class="row">
            <div class="col-md-6 mx-auto mt-2">
                <form id="form_submit">
                    <div class="radio-toolbar mb-5">
                        <input type="radio" id="monthly" name="frekvens" value="monthly" checked>
                        <label for="monthly" class="with-pointer">M?nedlig donation</label>

                        <input type="radio" id="one-time" name="frekvens" value="one-time">
                        <label for="one-time" class="with-pointer">Enkel donation</label>
                    </div>
                    <div class="radio-toolbar" id="monthly-donation-block">
                        <input type="radio" id="amount-29" name="monthly-belob" value="29">
                        <label for="amount-29">29 DKK</label>

                        <input type="radio" id="amount-49" name="monthly-belob" value="49" checked>
                        <label for="amount-49">49 DKK</label>

                        <input type="radio" id="amount-79" name="monthly-belob" value="79">
                        <label for="amount-79">79 DKK</label>
                    </div>
                    <div class="radio-toolbar" id="one-time-donation-block" style="display: none;">
                        <input type="radio" id="amount-99" name="one-time-belob" value="99">
                        <label for="amount-99">99 DKK</label>

                        <input type="radio" id="amount-149" name="one-time-belob" value="149" checked>
                        <label for="amount-149">149 DKK</label>

                        <input type="radio" id="amount-199" name="one-time-belob" value="199">
                        <label for="amount-199">199 DKK</label>
                    </div>
                    <div class="input-group mb-5">
                        <input type="text" class="form-control num-only auto-ok" id="belob" placeholder="Valgfrit bel?b"
                            aria-label="Recipient's username" aria-describedby="basic-addon2">
                        <span class="input-group-text" id="basic-addon2">DKK</span>
                        <div id="belob-feedback" class="invalid-feedback">
                            Incorrect Number
                        </div>
                    </div>
                    <div class="mb-3">
                        <input type="text" class="form-control num-only" id="phone" placeholder="Telefonnummer" required
                            maxlength="10">
                    </div>
                    <div class="d-grid gap-2">
                        <button type="submit" class="custom-btn custom-btn-2 hover-opacity">
                            <span>FORTS?T</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
<!-- These two are required unless jQuery & bootstrap is already included -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
    integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP u1T9qYdvdihz0PPSiiqn/ /3e7Jo4EaG7TubfWGUrMQ=="
    crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
    integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG"
    crossorigin="anonymous"></script>
<!-- This is required for autocomplete api -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" type="text/javascript"></script>
<script src="https://cdn.dataforsyningen.dk/dawa/assets/dawa-autocomplete2/1.0.2/dawa-autocomplete2.min.js"></script>
<!-- this is required for debounce delay of input field -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"
    integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG ljU96qKRCWh quCY7yefSmlkQw1ANQ=="
    crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"
    integrity="sha512-T/tUfKSV1bihCnd MxKD0Hm1uBBroVYBOYSk1knyvQ9VyZJpc/ALb4P0r6ubwVPSGB2GvjeoMAJJImBG12TiaQ=="
    crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js"
    integrity="sha512-LGXaggshOkD/at6PFNcp2V2unf9LzFq6LE sChH7ceMTDP0g2kn6Vxwgg7wkPP7AAtX lmPqPdxB47A0Nz0cMQ=="
    crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.all.min.js"></script>
</html>

uj5u.com熱心網友回復：

對于指標箭頭，您可以使用 CSS 邊框來獲得它：

button {position:relative; padding:10px; background:orange; color:#fff; border:none;}
button:before {
    content:''; position:absolute; top:100%; left:50%;
    transform:translateX(-50%);
    width: 0;
    height: 0;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    border-top:15px solid orange;
}

<button>Button</button>

我不確定您在說什么“水平對齊”？

uj5u.com熱心網友回復：

這些要求可能有很多解決方案。我為按鈕設計做了一個部分示例。你可以檢查一下。

風格

    /* Overriding Styles */
.radio-toolbar {
  margin: 10px 0px;
}

.radio-toolbar input[type="radio"] {
  opacity: 0;
  /* position: fixed; */
  width: 0;
}

.radio-toolbar label {
  display: inline-block;
  background-color: white;
  padding: 5px 22px;
  font-family: sans-serif, Arial;
  font-size: 16px;
  border: 1px solid #E7E7E7;
  border-radius: 0px;
  position: relative;
  z-index: 5;
}

.radio-toolbar label:hover {
  background-color: #E7E7E7;
}

/* .radio-toolbar input[type="radio"]:focus label {
border: 2px dashed #444;
} */

.radio-toolbar input[type="radio"]:checked label {
  background-color: #C8951C;
  color: white;
  border: none;
}
.btn-color{
  display: flex;
  justify-content: center;
}
.arrow{
  position: absolute;
  width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-top: 50px solid #c8951c;
  z-index: 0;
}

<div class="radio-toolbar mb-5">
  <div class="row">
    <div class="btn-color">
        <input type="radio" id="monthly" name="frekvens" value="monthly" checked>
        <label for="monthly" class="button-month">
          M?nedlig donation
        </label>
        <span class="arrow"></span>
    </div>
  </div>
</div>

https://codepen.io/njmsaikat/pen/gOXYzBe

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/421171.html

標籤：

上一篇：洗掉通過Woocommerce注入頭部的行內Css規則(woocommerce-inline-inline-css)

下一篇：boostrapcol-auto占用過多空間