How can I match my custom HTML liquid code arrow to the theme default?

Miguel3403
Tourist
20 0 1

Hi everyone im working on this page and i have been asked to try to get the arrow in this custom html liquid code exactly the same was the default ones from the theme but i have been unable to do that and just did some generic arrow, but if anyone can help me achive that and have a arrow exactly the same was the ones in the header that would be awesome. 

 

Miguel3403_0-1709225770534.png

Reply 1 (1)

Miguel3403
Tourist
20 0 1

current html code 


<div class="gallery">
    <a href="https://iportwine-com.myshopify.com{{ language_prefix }}/collections/portuguese-wines" target="_self" class="image-link">
        <img src="{{ first_image_url }}" alt="">
    </a>

    <a href="https://iportwine-com.myshopify.com{{ language_prefix }}/collections/vintage-port-wine" target="_self" class="image-link">
    </a>
    <a href="https://iportwine-com.myshopify.com{{ language_prefix }}/collections/grahams-special-selecion" target="_self" class="image-link">
    </a>
    <a href="https://iportwine-com.myshopify.com{{ language_prefix }}/collections/dated-wines" target="_self" class="image-link">
    </a>
    <a href="https://iportwine-com.myshopify.com{{ language_prefix }}/collections/chocolates?filter.v.price.gte=&filter.v.price.lte=&filter.p.product_type=Chocolate+Origens" target="_self" class="image-link">
    </a>

    <div class="image-container">
        <form action="https://iportwine-com.myshopify.com{{ language_prefix }}/search" method="get" class="search-form" id="searchForm">
            <div class="search-form">
                <div class="custom-select">
                    <select name="q" id="wineYear" onchange="document.getElementById('searchForm').submit();">
                        <option value="">{{ select_year_text }}</option>
                        {% for year in (1866..2024) %}
                            <option value="{{ year }}">{{ year }}</option>
                        {% endfor %}
                    </select>
                    <noscript><button type="submit">Search</button></noscript>
                    <div class="arrow-down"></div>
                </div>
            </div>
        </form>
    </div>
   
    <style>
        .gallery {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 10px;
        }
       
        .custom-select {
          position: relative;
          margin-right: 0px;
          margin-bottom: -15px;
        }
       
        .image-link,
        .image-container {
          position: relative;
        }
       
        .image-link img,
        .image-container img {
          width: 100%;
        }
       
        .search-form select {
          width: 100%;
          background: rgba(255, 255, 255, 0.95);
          border: 1px solid #ccc;
          border-radius: 0px;
          padding: 10px;
          box-sizing: border-box;
          color: black;
          font-weight: bold;
          outline: none;
          transition: border-color 0.3s;
        }
       
        .arrow-down {
          position: absolute;
          top: 50%;
          right: 10px;
          width: 0;
          height: 0;
          border-left: 6px solid transparent;
          border-right: 6px solid transparent;
          border-top: 8px solid #000;
          transform: translateY(-50%);
        }
       
        .search-form select:hover,
        .search-form select:focus {
          border-color: transparent;
        }
       
        .search-form {
          position: absolute;
          bottom: 10px;
          right: 0;
        }
       
        @media (max-width: 600px) {
          .gallery {
            grid-template-columns: 1fr;
          }
        }
      </style>
     
    <script>
        document.getElementById('wineYear').addEventListener('change', function () {
            this.form.submit();
        });
    </script>

</body>
</html>