Rounded Corners for search bar

  • Resolved saprotsenko

    (@saprotsenko)


    5 years, 11 months ago

    hi there!

    I’m trying to make the search form have rounded corners (50px), is there an option where I might be able to do this please?

    Thank you!
    Alex

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • troyw2015

    (@troyw2015)

    5 years, 10 months ago

    Not sure you will get any help from the author. I searched high and low for an answer and eventually got this from a very clever developer;

    .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input {
    border-radius: 7px;
    }

    and this;

    .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp .dgwt-wcas-search-submit {
    border-radius: 7px;
    }

    Hope this helps anyone else who gets stuck with this.

    maxzu

    (@maxzu)

    5 years, 10 months ago

    @troyw2015 no funciono doc, a menos que sea asi en el tema OceanWp.
    la barra de búsqueda queda igual de cuadrada

    maxzu

    (@maxzu)

    5 years, 10 months ago

    @troyw2015

    esta me ayudo a mi

    .dgwt-wcas-search-wrapp {
    width:400px;
    }

    body .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input {
    border-radius: 20px;
    border:2px solid #ff6600;
    }

    Plugin Author Damian Góra

    (@damian-gora)

    5 years, 10 months ago

    Hello,

    Following CSS makes rounded corners including submit button:

    
.dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input {
	border-radius: 50px;
}
.dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp .dgwt-wcas-search-submit {
	border-radius: 0 50px 50px 0;
}

    If you don’t familiar with custom CSS, take a look at this video.

    Best
    Damian

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Rounded Corners for search bar’ is closed to new replies.