Trebam CSS kod - chatGPT nije pomogao

Pozdrav kolege,

treba mi CSS kod koji će dodati valovitu liniju ispod svakog polja za unos podataka u Elementor kontakt formi.

Znači nešto ovakvo:

Ovo sam uspješno napravio u meniju na web stranici međutim nikako ne uspijevam i u kontakt formi, Sve što mogu dobiti je ravna linija. Googlanje nije pomoglo kao ni chatGPT.

Tu imaš u CSSu kako dobiti te valovite linije:

I onda bi probao zakačiti tu classu na border-bottom od form fieldova.

Meni je teoretski jasno o cemu ti pricas ali prakticno nemam pojma kako da to rijesim.
Da li bi se mogla umjesto CSS-a dodati nekakva slika ispod ovih polja, recimo .svg?

Edit: ako ne bude islo drukcije jednostavno cu ove linije dodati na pozadinsku sliku.

evo meni šta je chatGPT napisao:

.contact-form {
  position: relative;
  padding-bottom: 20px;
}

.contact-form:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20px;
  background-image: url('https://www.example.com/wave-lines.png'); /* Replace with your own image */
  background-repeat: repeat-x;
  transform: scaleY(-1);
}

In this code, we’re creating a pseudo-element :before for the .contact-form class, which will be positioned at the bottom of the form. We’re then setting the background-image property to a wave lines image, which should be hosted on your website. You can replace the url value with the URL of your own image.

We’re also setting background-repeat to repeat-x to make the wave lines repeat horizontally across the width of the form. Finally, we’re using transform: scaleY(-1) to flip the wave lines vertically so that they appear to be flowing upwards.

sve u svemu izgleda najbolje dodaj sliku u pozadini

Napisao je sranje jer meni ne treba da se linije ponavljaju nego ispod svakog input fielda trebam tu liniju.

1 Like

Ubaci ovo pa vidi jel ti to odgovara (tu sam prilagodio neki kod sa weba):

<!DOCTYPE html>
<html>
<head>
<style> 
.wavy {
  --size: 10px;
  --b: 20px;
  --p: 20px;
  --R: calc(15px + var(--b)/2);
  
  --_g: #0000 calc(99% - var(--b)),#000 calc(101% - var(--b)) 99%,#0000 101%;
  -webkit-mask:
    radial-gradient(var(--R) at left 50% bottom calc(-1*var(--p)),var(--_g)) 
      calc(50% - 2*var(--size)) calc(50% - var(--size)/2 - var(--b)/2)/calc(4*var(--size)) calc(var(--size) + var(--b)),
    radial-gradient(var(--R) at left 50% top    calc(-1*var(--p)),var(--_g)) 
      50%                       calc(50% + var(--size)/2 + var(--b)/2)/calc(4*var(--size)) calc(var(--size) + var(--b));
  background: linear-gradient(90deg,red,blue);
  height: 20px;
}
input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: none;
}
</style>
</head>
<body>

<h2>Input fields with bottom border</h2>

<form>
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="fname">
  <div class="wavy"></div>
  <label for="lname">Last Name</label>
  <input type="text" id="lname" name="lname">
  <div class="wavy"></div>
</form>

</body>
</html>

Ako nećeš gradient samo stavi red umjesto blue

Hvala puno kolega, ali to nije to sto ja trebam. Ne trebam cijelu formu niti HTML, nego mi treba custom CSS za Elementor formu.

pa wavy ti je custom css element

i ispod svakog form fielda stavi samo div koji ima class wavy
Kreiraj samo prazan div i daj mu klasu wavy

Ne moze to tako. Ja kad u Elementoru dodam na formu class wavy dobijem ovo:

Ovdje desno trebaju biti polja od forme (i jesu inace) ali kad ja ovo ovako dodam ona nestanu i dobijem samo ovu jednu liniju.

Po meni ovo nije moguce izvesti sa CSS-om. Kod koji meni treba mora doci ispod polja za unos texta a stvar je u tome da klasa za to ne postoji u originalnom kodu.

Aha, to je valjda jer elementor nije baš fleksibilan i ne da ti da radi što želiš.

Znači ti ne možeš dodati svoj div iza polja u formi?

Ako zelis poslat cu ti link gdje mi ovo treba pa idi na inspect - znati ces vise nego ja…

ajd baci da pogledam

On je u sustini dodao sve linije, samo jednu preko druge, tj. na prvi element koji ima poziciju relative.

Ono sto mozes uraditi jeste da dodas u CSS-u poljima u formi (vidi imaju li neku klasu, ili ciljaj direktno inpute) position: relative; i trebalo bi ti se sve posložiti.