Question

如何在CSS中重新创建以下效果？

到目前为止，这是我的尝试：https://jsfiddle.net/cLqatpzf/。

我尝试将其基于：https://www.uber.com/en-GB/fare-estimate/。

HTML

  <div class="soft-tiny palm-push--sides bg-primary-layer-color pointer-events--all" data-reactid="381">
    <div class="bg-primary-layer-color pointer-events--all" data-reactid="382">
      <div class="position--relative" data-reactid="383">
        <div class="fare-estimate__input-connector z-10" data-reactid="384"></div>
        <div class="fare-estimate__pickup push-tiny--bottom" data-reactid="385">
          <div class="autocomplete-container" data-reactid="386">
            <div class="autocomplete position--relative" data-reactid="387">
              <div class="autocomplete__input hard flush--bottom autocomplete__input--icon" data-reactid="388">
                <div data-reactid="389"><input value="" placeholder="Enter pickup location" autocomplete="off"
                    aria-label="Enter a pickup location: address, city and state required" data-reactid="390"></div>
              </div>
            </div>
          </div><svg viewBox="0 0 64 64" width="16px" height="16px" class="_style_2ZI4zP _style_4wJp4e" tabindex="0"
            role="button" aria-label="Locate me" data-reactid="391">
            <path d="M28.0355206,31.9992104H7.978334L54.3777542,8.2149429c0.1557846-0.081008,0.3967628-0.2157388,0.6570473-0.2157388 c0.4893532,0,0.993042,0.4245925,0.993042,0.9369226c0,0.1713877-0.0173073,0.3512955-0.1097603,0.5290899L32.0355339,55.9992104 l-0.0000114-20C32.0355225,33.7900696,30.2446594,31.9992104,28.0355206,31.9992104z"
              data-reactid="392"></path>
          </svg>
        </div>
        <div class="_style_4nVh08 fare-estimate__destination-row" data-reactid="393">
          <div class="_style_VxPAE fare-estimate__destination" data-reactid="394">
            <div class="autocomplete-container" data-reactid="395">
              <div class="autocomplete position--relative" data-reactid="396">
                <div class="autocomplete__input hard flush--bottom autocomplete__input--icon" data-reactid="397">
                  <div data-reactid="398"><input value="" placeholder="Enter destination" autocomplete="off" aria-label="Enter a destination: address, city and state required"
                      data-reactid="399"></div>
                </div>
              </div>
            </div>
          </div><button style="line-height:0px;padding:13px;" tabindex="-1" class="_style_1PoMFk _style_16HNh4"
            aria-label="Request estimate" kind="primary" disabled="" data-reactid="400"><svg viewBox="0 0 64 64" width="16px"
              height="16px" class=" _style_26XEsq" data-reactid="401">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M59.9270592,31.9847012L60,32.061058L43.7665291,49.1333275l-3.2469215-3.5932007 L51.3236885,34H4v-4h47.3943481L40.5196075,18.4069672l3.2469215-3.4938126L60,31.946312L59.9270592,31.9847012z"
                data-reactid="402"></path>
            </svg></button>
        </div>
      </div>
    </div>
  </div>

CSS

ion-toolbar {
  color: #919191;
}

.bg-primary-layer-color {
  background-color: #FFF!important;
}

.fare-estimate__input-connector {
  position: absolute;
  top: 23px;
  bottom: 21px;
  left: 15.5px;
  width: 1px;
  background-color: #C6C6C6;
}

.fare-estimate__input-connector:before {
  bottom: -1.5px;
  background-color: #F32F00;
  border: 1px solid #F32F00;
}

.push-tiny--bottom, .push-tiny--ends {
  margin-bottom: 12px!important;
}

.autocomplete-container {
  width: 100%;
}

.position--relative {
  position: relative!important;
}

.autocomplete__input {
  height: 44px;
  width: 100%;
  border: 1px solid #E5E5E4;
}

.fare-estimator {
  width: 440px;
  display: flex;
  flex-direction: column;
  height: calc(100% - 71px);
  padding: 24px 24px 0;
}

.autocomplete div input {
  width: 100%;
  border: 0;
  padding: 0 16px 0 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Answer 1

检查

._style_1PoMFk {
    -moz-box-sizing: border-box !important;
    -webkit-transition: all 400ms ease !important;
    border-color: #C6C6C6 !important;
    background-color: #C6C6C6 !important;
    box-sizing: border-box !important;
    border-width: 2px !important;
    border-style: solid !important;
    text-decoration: none !important;
    display: inline-block !important;
    vertical-align: middle !important;
    text-align: center !important;
    margin: 0 !important;
    cursor: default !important;
    overflow: visible !important;
    border-radius: 0px !important;
    text-transform: uppercase !important;
    line-height: 0px !important;
    outline: none !important;
    position: relative !important;
    transition: all 400ms ease !important;
    font-family: ff-clan-web-pro, "Helvetica Neue", Helvetica, sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    padding: 13px !important;
    opacity: 0.6 !important;
}

._style_4nVh08 {
    -webkit-flex-wrap: nowrap !important;
    -ms-flex-wrap: nowrap !important;
    -webkit-box-lines: nowrap !important;
    flex-wrap: nowrap !important;
    display: -webkit-box !important;
    display: -moz-box !important;
    display: -ms-flexbox !important;
    display: -webkit-flex !important;
    display: flex !important;
}

._style_2ZI4zP {
    position: absolute !important;
    top: 12px !important;
    right: 15px !important;
    color: #c6c6c6 !important;
    cursor: pointer !important;
    font-size: 1.42857rem !important;
    line-height: 1.4 !important;
    width: 1em !important;
    height: 1em !important;
}

    <div class="soft-tiny palm-push--sides bg-primary-layer-color pointer-events--all hidden--palm" data-reactid="381">
                <div class="bg-primary-layer-color pointer-events--all" data-reactid="382">
                    <div class="position--relative" data-reactid="383">
                        <div class="fare-estimate__input-connector z-10" data-reactid="384">
                        </div>
                        <div class="fare-estimate__pickup push-tiny--bottom" data-reactid="385">
                            <div class="autocomplete-container" data-reactid="386">
                                <div class="autocomplete position--relative" data-reactid="387">
                                    <div class="autocomplete__input hard flush--bottom autocomplete__input--icon" data-reactid="388">
                                        <div data-reactid="389">
                                            <input value="" placeholder="Enter pickup location" autocomplete="off" aria-label="Enter a pickup location: address, city and state required" data-reactid="390">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <svg viewBox="0 0 64 64" width="16px" height="16px" class="_style_2ZI4zP _style_4wJp4e" tabindex="0" role="button" aria-label="Locate me" data-reactid="391">
                                <path d="M28.0355206,31.9992104H7.978334L54.3777542,8.2149429c0.1557846-0.081008,0.3967628-0.2157388,0.6570473-0.2157388 c0.4893532,0,0.993042,0.4245925,0.993042,0.9369226c0,0.1713877-0.0173073,0.3512955-0.1097603,0.5290899L32.0355339,55.9992104 l-0.0000114-20C32.0355225,33.7900696,30.2446594,31.9992104,28.0355206,31.9992104z" data-reactid="392">
                                </path>
                            </svg>
                        </div>
                        <div class="_style_4nVh08 fare-estimate__destination-row" data-reactid="393">
                            <div class="_style_VxPAE fare-estimate__destination" data-reactid="394">
                                <div class="autocomplete-container" data-reactid="395">
                                    <div class="autocomplete position--relative" data-reactid="396">
                                        <div class="autocomplete__input hard flush--bottom autocomplete__input--icon" data-reactid="397">
                                            <div data-reactid="398">
                                                <input value="" placeholder="Enter destination" autocomplete="off" aria-label="Enter a destination: address, city and state required" data-reactid="399">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <button style="line-height:0px;padding:13px;" tabindex="-1" class="_style_1PoMFk _style_16HNh4" aria-label="Request estimate" kind="primary" disabled="" data-reactid="400">
                                <svg viewBox="0 0 64 64" width="16px" height="16px" class=" _style_26XEsq" data-reactid="401">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M59.9270592,31.9847012L60,32.061058L43.7665291,49.1333275l-3.2469215-3.5932007 L51.3236885,34H4v-4h47.3943481L40.5196075,18.4069672l3.2469215-3.4938126L60,31.946312L59.9270592,31.9847012z" data-reactid="402">
                                    </path>
                                </svg>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

还从here添加CSS，这是必需的

例如

<head>
<title>...</title>
<link rel="stylesheet" href="<stylesheet>.css" />
</head>

Answer 2

我将父div的固定宽度设置为300px，
在该连接线上添加了：before和：after psuedo元素，以制作红色和绿色的点
将字体大小更改为16
在相应的div中移动了按钮标签
为每个按钮分配自己的ID

在输入标签中添加了一个用于定位的类

HTML：

            <input 
              class="input-text"
              value="" 
              placeholder="Enter pickup location" 
              autocomplete="off"
              aria-label="Enter a pickup location: address, city and state required" 
              data-reactid="390">

              <svg id="pickup-button" viewBox="0 0 64 64" width="16px" height="16px" class="_style_2ZI4zP _style_4wJp4e" tabindex="0"
        role="button" aria-label="Locate me" data-reactid="391">
        <path d="M28.0355206,31.9992104H7.978334L54.3777542,8.2149429c0.1557846-0.081008,0.3967628-0.2157388,0.6570473-0.2157388 c0.4893532,0,0.993042,0.4245925,0.993042,0.9369226c0,0.1713877-0.0173073,0.3512955-0.1097603,0.5290899L32.0355339,55.9992104 l-0.0000114-20C32.0355225,33.7900696,30.2446594,31.9992104,28.0355206,31.9992104z"
          data-reactid="392"></path>
      </svg>
      </div>
          </div>

        </div>

      </div>
    </div>
    <div class="_style_4nVh08 fare-estimate__destination-row" data-reactid="393">
      <div class="_style_VxPAE fare-estimate__destination" data-reactid="394">
        <div class="autocomplete-container" data-reactid="395">
          <div class="autocomplete position--relative" data-reactid="396">
            <div class="autocomplete__input hard flush--bottom autocomplete__input--icon" data-reactid="397">
              <div data-reactid="398">

              <input
              class="input-text"
              value="" 
              placeholder="Enter destination" 
              autocomplete="off" 
              aria-label="Enter a destination: address, city and state required"
              data-reactid="399">

              <button id="destination-button" tabindex="-1" class="_style_1PoMFk _style_16HNh4"
        aria-label="Request estimate" kind="primary" disabled="" data-reactid="400"><svg viewBox="0 0 64 64" width="16px"
          height="16px" class=" _style_26XEsq" data-reactid="401">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M59.9270592,31.9847012L60,32.061058L43.7665291,49.1333275l-3.2469215-3.5932007 L51.3236885,34H4v-4h47.3943481L40.5196075,18.4069672l3.2469215-3.4938126L60,31.946312L59.9270592,31.9847012z"
            data-reactid="402"></path>
        </svg></button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS：

ion-toolbar {
  color: #919191;

}

.bg-primary-layer-color {
  background-color: #FFF!important;
}

.fare-estimate__input-connector {
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 15.5px;
  width: 1px;
  background-color: #C6C6C6;
}

.fare-estimate__input-connector::before{
  height: 5px;
  width: 5px;
  border-radius: 2.5px;
  background-color: green;
  content: "";
  position: absolute;
  top: 0;
  left: -1.5px;
}

.fare-estimate__input-connector::after{
  height: 5px;
  width: 5px;
  border-radius: 2.5px;
  background-color: red;
  content: "";
  position: absolute;
  bottom: 0;
  left: -1.5px;
}

/* .fare-estimate__input-connector:before {
  bottom: -1.5px;
  background-color: #F32F00;
  border: 1px solid #F32F00;
} */

.push-tiny--bottom, .push-tiny--ends {
  margin-bottom: 12px!important;
}

.autocomplete-container {
  width: 100%;
}

.position--relative {
  position: relative!important;
}

.autocomplete__input {
  height: 44px;
  width: 100%;
  border: 1px solid #E5E5E4;
}

.fare-estimator {
  width: 440px;
  display: flex;
  flex-direction: column;
  height: calc(100% - 71px);
  padding: 24px 24px 0;
}

.autocomplete div input {
  border: 0;
  padding: 0 16px 0 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#destination-button {
  height: 46px;
  width: 46px;
  position: absolute;
  right: -2px;
  top: 0px;
}

#pickup-button{
  position: absolute;
  right: 15px;
  top: 15px;
}

.input-text {
  position: absolute;
  top: 14px;
  left: 30px;
  background: transparent;
  font-size: 16px;
}

here's my work

行程预订屏幕的CSS

2 个答案: