इनपुट फ़ील्ड में तीर को दाईं ओर कैसे ले जाएँ?

Question

.wrapper-dropdown-3 {
  width: 200px;
  margin: 0 auto;
  padding: 10px;
  background: #fff;
  border-radius: 7px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 1px 1px rgba(50, 50, 50, 0.1);
  cursor: pointer;
  font-weight: bold;
  color: #8AA8BD;
}

.wrapper-dropdown-3:after {
  content: "";
  width: 0;
  height: 0;
  margin-top: -3px;
  border-width: 6px 6px 0 6px;
  border-style: solid;
  border-color: #8aa8bd transparent;
}

<div id="dd" class="wrapper-dropdown-3" tabindex="1">
  <span>Transport</span>
</div>

उपरोक्त कोड में मैं .wrapper-dropdown-3 के मध्य दाईं ओर नीला तीर डालना चाहता हूं। अभी तक यह ट्रांसपोर्ट span के पास सबसे ऊपर दाईं ओर स्थित है। मुझे यकीन नहीं है कि मैं इसे कैसे सही बीच में ले जा सकता हूं? कोई सुझाव?

html css

0

user5228393 22 नवम्बर 2017, 21:30

Answer 1

आप कंटेनर के खिलाफ पूर्ण स्थिति का उपयोग कर सकते हैं:

.wrapper-dropdown-3 {
    width: 200px;
    margin: 0 auto;
    padding: 10px;

    background: #fff;
    border-radius: 7px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 1px 1px rgba(50, 50, 50, 0.1);
    cursor: pointer;

    font-weight: bold;
    color: #8AA8BD;

    position: relative;
}

.wrapper-dropdown-3:after {
    content: "";
    width: 0;
    height: 0;
    margin-top: -3px;
    border-width: 6px 6px 0 6px;
    border-style: solid;
    border-color: #8aa8bd transparent;
    position: absolute;
    right: 5px;
    top: calc(50% + 6px / 2); /* 6px here is border-width value to compensate a fact that arrow is made from border */
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

<div id="dd" class="wrapper-dropdown-3" tabindex="1">
	<span>Transport</span>
</div>

1

Flying 22 नवम्बर 2017, 21:33

Answer 2

बस इस तरह पोजीशनिंग का प्रयोग करें:

.wrapper-dropdown-3 {
  width: 200px;
  margin: 0 auto;
  padding: 10px;
  background: #fff;
  border-radius: 7px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 1px 1px rgba(50, 50, 50, 0.1);
  cursor: pointer;
  font-weight: bold;
  color: #8AA8BD;
  /*Code added*/
  position:relative;
  /**/
}

.wrapper-dropdown-3:after {
  /*Code added*/
  position:absolute;
  right:5px;
  top:50%;
  /**/
  content: "";
  width: 0;
  height: 0;
  margin-top: -3px;
  border-width: 6px 6px 0 6px;
  border-style: solid;
  border-color: #8aa8bd transparent;
}

<div id="dd" class="wrapper-dropdown-3" tabindex="1">
  <span>Transport</span>
</div>

1

Temani Afif 22 नवम्बर 2017, 21:39

इनपुट फ़ील्ड में तीर को दाईं ओर कैसे ले जाएँ?

2 जवाब

संबंधित सवाल

नए सवाल