:focus ::after selector issue

Question

I have an issue with ::after selector, heres my code:

HTML:

...

<div class="post">
    <form>
         <textarea placeholder="Message Here..." maxlength="255"></textarea>
    </form>
</div>

...

CSS:

.wrapper .left_section .profile_small .post form textarea:focus::after {
    content:"<input type='submit' value='Post' />"; 
}

So when the text area is selected (in focus) I'd like the submit button to appear. Does anyone know of the solution?

Thanks in advance.

This might help: http://stackoverflow.com/questions/2587669/css-after-pseudo-element-on-input-field Unfortunately, I think the `:before` and `:after` pseudoelements don't work on input or textareas — Haroldchen, Apr 24 '14 at 11:09
@Haroldchen - absolutely correct, it will need to be wrapped in say, a `div` — SW4, Apr 24 '14 at 11:17
Plus, you can't use pseudo-elements to generate entirely new HTML elements. Because they are *pseudo-*elements. Your needs would be best served by a script. — BoltClock, Apr 24 '14 at 11:23

Terry · Answer 1 · 2014-04-25T07:55:21.333

You can use CSS general sibling selector to do what you want — but you will have to place the submit button into your HTML first: http://jsfiddle.net/teddyrised/qRtX6/

<div class="post">
    <form>
        <textarea placeholder="Message Here..." maxlength="255"></textarea>
        <input type="submit" value="Post" />
    </form>
</div>

For your CSS:

input[type='submit'] {
    display: none;
}
textarea:focus ~ input[type='submit'] {
    display: block;
}

Caveat: The submit button has to be placed after the textarea element, as the general successive sibling selector only works downstream (i.e. it will not look for siblings preceding the textarea, thus the name successive).

Wow, didn't realize stuff like this could be done through CSS, nice example! — user3352340, Apr 25 '14 at 00:53

score 0 · Answer 2 · answered Apr 24 '14 at 11:54

here its another help with some jquery:

<html>
<head>  
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
        function onFocus(){

        }

        $(document).ready(function(){
        $("#myTextArea").on("focus" , function(){
            var btn = document.createElement("button")
            $(btn).append("submit");
            $(btn).attr("id" , "mySubmit");
            $("#container").append(btn);
        })

        $("#myTextArea").on("blur" , function(){
            $("#mySubmit").remove();
        })
        })          
    </script>
<head>
<body>
    <span id="container">
        <textarea id="myTextArea">
        </textarea>
    </span> 
</body>

Hope it helps you, cheers!

Good code, although its way too complex for what needs to be (after looking into it). Thanks anyway! — user3352340, Apr 24 '14 at 23:09

score 0 · Answer 3 · answered Apr 24 '14 at 12:00

0

You can't use html in content tag in CSS for what I know

answered Apr 24 '14 at 12:00

yotamN

711
2
9
22

score 0 · Answer 4 · answered Apr 24 '14 at 23:10

$( document ).ready(function() {
    $( ".create_post" ).focus(function() {
      $( ".create_post" ).after("<input class='submit_post' type='submit' value='Post' />");
      $( ".profile" ).css("margin-bottom","71px");
    });
    $( ".create_post" ).focusout(function() {
      $( ".submit_post" ).remove();
      $( ".profile" ).css("margin-bottom","");
    });
});

Works.

:focus ::after selector issue

4 Answers4