Styling a html textbox

[viadck]

Hello,

I’m trying to style a html text box inside a classic raw content element but it’s not working.

This is how it looks now: https://imgur.com/a/qnaoV
And I want it to look similar to this: https://imgur.com/a/bIBhv
Or this: https://imgur.com/a/2dGpz

Could you please advise how to make this happen?

I’ll include the domain for you to see in a secure note.

Regards

[jade]

Hi there,

Please update your code to:

form input[type="text"].domainbox {
    width: 70%;
    vertical-align: baseline;
    background-image: url(http://www.alojared.com/v3/wp-content/uploads/2018/03/buscar.png);
    background-position: 6px 4px;
    background-repeat: no-repeat;
    padding: 20px 20px 20px 50px !important;
    margin-bottom: 0;
}

then add this

input[value="Buscar"] {
    position: relative;
    left: -20px;
    top: -1px;
}

[viadck]

Thanks for your answer.

How can I style the button as the example below?
And how can I increase the text size in the text box?

Thank you!

[Prasant]

Hello @viadck,

Thanks for updating the thread.

To make the changes, please replace previous code with the following:

form input[type="text"].domainbox {
    width: 70%;
    vertical-align: baseline;
    background-image: url(http://www.alojared.com/v3/wp-content/uploads/2018/03/buscar.png);
    background-position: 8px 10px;
    background-repeat: no-repeat;
    padding: 25px 20px 25px 50px !important;
    margin-bottom: 0;
    font-size: 17px;
    border-color: #5ed19c;
}

input[value="Buscar"] {
    position: relative;
    left: -20px;
    top: -3px;
    padding: 16px 20px;
}  

Let us know how it goes.

Thanks.