Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › Where did the FORM field go?

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • May 22, 2014 at 11:41 am #170870
    knowledgenotebook
    Participant

    Hi,

    I found the following code for ON / OFF switch really neat and would like to use it. However, when the FORM is submitted with the ON value the field (in the FORM) is not sent while it is when it’s set to OFF. What I want is, in either case the FORM field of testOption1 needs to be present in the FORM. How could we correct it?

    Thanks in advance.

    <cfif isdefined("sendForm")>
    <cfdump var="#FORM#">
</cfif>

<html>
<head>
    <style type="text/css">
    body {
    background: #f9f9f9;
    text-align: center;
    font: 11px sans-serif;
    text-shadow: 0 1px 1px #fff;
}
input::after {
    content: '';
    margin: 0; 
    padding: 0;
    width: 39px;
    height: 25px;
    background: -webkit-linear-gradient(top, #cdcdcd, #fbfbfb);
    border-radius: 3px;
    box-shadow: inset 0 1px 0 #f0f0f0;
    position: absolute;
    top: 0; left: 53px;
    border: 1px solid #919191;
    -webkit-transition: 1s all linear;
}
input::before {
    content: 'ON';
    margin: 0; 
    padding: 0;
    width: 55px;
    height: 25px;
    background: -webkit-linear-gradient(top, #3672dc, #4085ec 50%, #4d8fef 50%, #76adfc);
    border-radius: 3px;
    border: 1px solid #1654b5;
    box-shadow: inset 0 2px 2px #2a5bb3,
                inset -3px 0 3px #2a5bb3;
    text-align: center;
    color: #fff;
    font: 700 14px sans-serif; 
    text-shadow: 0 -1px 0 #1b3b6f;
    line-height: 27px;
    position: absolute;
    top: 0; left: 0;
}
input {
    -webkit-appearance: none;
    margin: 10px auto; 
    padding: 0;
    display: block;
    width: 64px;
    height: 27px;
    position: relative;
    border-radius: 3px 0 0 3px;
    -webkit-transition: 1s all linear;
}
input:checked::after {
    left: 0;
}
input:checked::before {
    content: 'OFF';
    left: 37px;
    background: -webkit-linear-gradient(top, #cfcfcf, #efefef 50%, #f9f9f9 50%, #fefefe);
    box-shadow: inset 0 2px 2px #b6b6b6,
                inset 3px 0 3px #b6b6b6;
    color: #7f7f7f;
    text-shadow: none;
    border-color: #7d7d7d
}

    </style>
</head>

<body>
<form action="<cfoutput>#CGI.script_name#</cfoutput>" method="post">
    <input type="checkbox" name="testOption1" value="0" />
    <input type="submit" name="sendForm" value="Submit">
</form>

    Pure CSS on/off toggle using just one element (a checkbox)<br />
    This can work in all browsers, but for now, it has been implemented for;<br />


</body>
</html>
    May 22, 2014 at 12:25 pm #170872
    Paulie_D
    Member

    You can’t use pseudo elements with input as far a i know. So there’s that.

    http://stackoverflow.com/questions/2587669/css-after-pseudo-element-on-input-field

    Codepen.io example please

    May 23, 2014 at 11:35 am #170962
    Paulie_D
    Member

    It’s not a question of the name.

    Pseudo-elements aren’t valid HTML for inputs….

    May 23, 2014 at 11:38 am #170963
    Paulie_D
    Member

    Pseudo elements can only be defined (or better said are only supported) on container elements. Because the way they are rendered are within the container itself as a child element. input can not contain other elements hence they’re not supported. A button on the other hand that’s also a form element supports them, because it’s a container of other sub elements.

    If you ask me if some browser does display these two pseudo elements on non-container elements it’s a bug and a non-standard conformance. Specification directly talks about element content…

    W3C specification

    If we carefully read the specification it actually says that they are inserted inside a containing element:

    Authors specify the style and location of generated content with the :before and :after pseudo-elements. As their names indicate, the :before and :after pseudo-elements specify the location of content before and after an element’s document tree content. The ‘content’ property, in conjunction with these pseudo-elements, specifies what is inserted.

    See? an element’s document tree content. As I understand it this means** within** a container.

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.