Help with two styles to a contact form, please.

[Anonymous]

I’m having trouble getting a linear gradient to apply to a select button on this contact form. It is applying to the text area which is not what I want.

I am also having trouble adapting the “toggle action” of the submit button on this page to work on the one above.

Many thanks in advance!

[Paulie_D]

I’m having trouble getting a linear gradient to apply to a select button.

    .cform select {
    width: 228px;
    border-radius: 5px;
    background: -webkit-linear-gradient(#E7DEC6, #DFD0B1);
    background: -o-linear-gradient(#E7DEC6, #DFD0B1);
    background: -moz-linear-gradient(#E7DEC6, #DFD0B1);
    bbackground: linear-gradient(#E7DEC6, #DFD0B1); /* spelling error ?? */
    }

I can see it…in Chrome…is this browser specific?

It is applying to the text area which is not what I want.

Text area? – I’m not sure what you mean.

[Anonymous]

Greetings Paulie,

In Firefox the gradient is showing in the area where the text “please select:” is seen, and not the button (which measures some 18px square) to the right of this with the down triangle.

Many thanks.

[Paulie_D]

You just want the down arrow colored…that’s MUCH harder and usually involves hiding and rebuilding etc.

https://css-tricks.com/dropdown-default-styling/

[Anonymous]

Greetings Paulie,

Yes, I know it’s much harder which is the reason for the post. The standard -moz- and -webkit- gradients aren’t working for this, and I’ve searched Google and have found nothing which deals with this specific issue, including the one you cited. I’m hoping someone who knows why the standard hacks aren’t working here.

Best Regards.

[Paulie_D]

I’m hoping someone who knows why the standard hacks aren’t working here.

I’m not sure what you mean by ‘standard hacks’.

The ‘arrow’ isn’t an HTML object as such…it’s a browser object (at least AFAIK) and although it may be addressable with vendor specific selectors I’m not aware of what those might be.

[Anonymous]

I’m not sure what you mean by ‘standard hacks’.

That’s OK Paulie, I’m hoping someone can help me with a workaround or solution to this.

Many thanks.

[Anonymous]

I’ve pared down, to the bare minimum, the button that “depresses” in Firefox, from the original page. I took the CSS for said button and added it to the CSS of the contact page where the button does not depress in Firefox, and nothing happened. I didn’t expect it to however as there is nothing there that is so different as to cause the desired action.

I’m assuming that the issue is with the contact form page functions over the original, or something on the original such as an input e.g. <input type='submit' name='Submit' value='Submit' />that isn’t on the contact page. I’m just too new at all of this to identify what the differences are and how to adapt this.

I’m hoping what I’ve done helps someone help me to adapt this.

Best Regards.

[paulob]

Hi,

The depressed affect is the focus state of the button which a browser handles in its own way until you take charge of styling and then you lose many of the default actions of the button (this is similar to many other form controls)/

In your first example you had focus rules applied for the button to re-instate this effect but did not have them in the page where you say it is not working.

To style the button you would need to do something like this:

.cform input[type="submit"] {
    background: linear-gradient(#e7dec6, #dfd0b1) repeat scroll 0 0 rgba(0, 0, 0, 0);
    border-top:2px solid #d8d5d2;
    border-left:2px solid #d8d5d2;
    border-bottom:2px solid #7d766c;
    border-right:2px solid #7d766c;
    border-radius: 5px;
    font-weight: bold;
    height: auto;
    padding: 3px 20px;
    width: auto;
}

.cform input[type="submit"]:focus {
    position:relative;
    top:1px;
    left:1px;
    border-top:2px solid #7d766c;
    border-left:2px solid #7d766c;
    border-bottom:2px solid #d8d5d2;
    border-right:2px solid #d8d5d2;
    outline:0;
}

[Anonymous]

Greetings Paulob,

Great to hear from you again!

So, I was on target that the differences in the coding are what caused the button in the first example to not function on the contact page!? I had eliminated all other possibilities, I thought, by stripping everything out of the original until only the button and its function remained. After having applied that basic styling to the coding of the contact page and seeing it still did not function, the only other component of the equation, in my mind, was the coding in the page elsewhere. I‘m just not at a point to know what to do to remedy many of these occurrences.

I really appreciate your reply as it has also broadened my understanding of the :focus pseudo class. Whenever someone replies to me I Google what they have added in order to try to understand what the coding does.

Would you happen to have a solution to applying a gradient to the select button for the email list? I’ve Googled it to death and it appears there were some work arounds that ceased to work after the last Firefox update. The only thing I’ve found that works is this, but it’s really an un-preferred way to go for me and would rather just leave the button in its default style if there is no other solution.

Many Thanks!

[paulob]

Hi,

The best thing is just to give the select a solid background colour as default and then apply the gradient as per normal for browsers that understand it. You can’t however change the arrow button unless you want to get into a lot of pre-fixed browser code or use a lot of hacks.

If you really want to style it cross browser then you will need one of those select replacement scripts that swap out the select for a styled list which you can style as you want and the js swaps the content in and out of the real select in the background.

I had a go at styling the select and you can get reasonable results for modern browsers but you have to jump through hoops to leave it in a working state for older browsers.

http://codepen.io/paulobrien/full/vdKax/

Suffice to say that in most cases its best to leave it alone or just apply simple styling :)

[Anonymous]

Greetings,

Thank you for your reply.

What I was hoping to do was this, but it appears there is no easy solution to it so I will leave it be. The select button looks a bit out of place with the page colours, but I don’t want a major rework of the page that might cause other issues.

Many thanks for your help as I did learn some new things in the process and that is always great.

Best Regards.

[paulob]

You could do that with my example but you’d need to supply an image for that button where I have the arrow code but all in all I really don’t think the effort is worth it. :)

[Anonymous]

Greetings Paul,

You’ve touched on one of the unknowns that I was going to ask traq at the end of his “tutorial” he has been giving me on how to create a contact form, and a secure one, from scratch. I’ve figured a lot of it out, but jumping into PHP while learning CSS has been a challenge. I got so enveloped into the PHP form, trying to understand its functions, that I had forgotten some basics of CSS.

Since you’ve touched on it, and I’ve no idea what creates the down arrow, where is the code and what does what? In the Codepen it looks like the text is atop the button, which is due to the gradient which I tried to apply to the button only but coloured the box background in my original attempt. I’ve remedied that now so it looks normal.

Seeing that these select boxes and buttons are useful for many applications, I want to understand how they are created and what their limitations are in styling.

I use Firefox and have given up on IE. I’m thinking of downloading Chrome, but am unsure.

Many Thanks!

[paulob]

Hi Michael,

Unfortunately form controls have historically been tied closely to the os and the browser that displays them and have often been designed by the UA (user agent) to fit in with the style scheme of the browser.

Many of the standard effects and design elements that you see on form controls are not available for styling and are pre defined by the browser. This has been a bugbear for many years.

Once you start styling the form control you lose some of the pre-defined browser defaults (as you have already noticed) but as mentioned there are only certain things that can be styled anyway and this varies greatly between browser. Suffice to say that the opportunities for styling complex form controls like selects are limited. You can controls things like colour and background but you can’t change the appearance of a select much more than that with standard css. (Even height for selects is not supported in older versions of IE.)

There is hope on the horizon and there are a lot of pre-fixed vendor specific rules that you can use these days for changing the default appearance of form controls but they are quite complex and vary between browser.

As I mentioned in my post above the only consistent way to style a select is to use JS and swap it out for a normal list which you can style as you want. The JS then handles the data swapping in the background.

There is also the issue of that if you change the appearance of a form element then a user may be confused as to what its purpose was. Form controls were originally designed so that they were consistent in all applications (for that browsers and OS) and users would always know what to expect and how to use the element.

In the end you do what you can :)

[Author]

Posts