CODEWITHSUNDEEP
htmlcss
user3352340
user3352340

Reputation: 145

:focus ::after selector issue

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.

Upvotes: 0

Views: 159

Answers (4)

Terry
Terry

Reputation: 66123

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).

Upvotes: 1

user3352340
user3352340

Reputation: 145

$( 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.

Upvotes: 0

yotamN
yotamN

Reputation: 771

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

From DevDocs css content page: Formal syntax: normal | none | [ <string> | <uri> | <counter> | attr() | open-quote | close-quote | no-open-quote | no-close-quote ]+

Upvotes: 0

MRodriguez08
MRodriguez08

Reputation: 191

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!

Upvotes: 0

Related Questions