http://codepen.io/bboyle/pen/ElLfy HTML First textareaLorem ipsum dolor sit amet,... -

Eklablog

Tous les blogs Top blogs Technologie & Science Tous les blogs Technologie & Science

Editer l'article Suivre ce blog

Administration + Créer mon blog

MENU

Tous les blogs Top blogs Technologie & Science Tous les blogs Technologie & Science

Connexion + Créer mon blog Editer l'article Suivre ce blog

Partager

14.07.2015 …

Par GloriaV

http://codepen.io/bboyle/pen/ElLfy

HTML CSS 3ª textarea

« Article précédent Article suivant »

Retour à l'accueil

Partager cet article

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam sed dicta aliquam consectetur..."
                     data-lang="en"
          ></a>
    </div>
                    <div class="ob-Shares-overblog">
        <a id="repost-4019251" class="ob-repost-btn" href="https://admin.eklablog.com/_repost/4019251" rel="nofollow" target="_blank"><span class="ob-repost-label">Repost</span><span class="ob-repost-count">0</span></a><script>
  ob.repost(document.querySelector("#repost-4019251"))
</script>
    </div>
      <div class="ob-Shares-mail">
    <a href="mailto:?subject=&body=Voici%20un%20article%20int%C3%A9ressant%20que%20j%27ai%20trouv%C3%A9%20sur%20https%3A%2F%2Ftutorialgloriav.eklablog.com%3A%20https%3A%2F%2Ftutorialgloriav.eklablog.com%2F-a118170498">
      <img src="https://assets.over-blog-kiwi.com/b/blog/v2026.07.02/images/shareicon_email.png">
    </a>
  </div>
  <div class="ob-Shares-print ob-Shares-print_4019251">
      <img src="https://assets.over-blog-kiwi.com/b/blog/v2026.07.02/images/printer.png">
  </div>
</div>

<script>
  var printElement = document.querySelector(".ob-Shares-print_4019251")
  printElement.addEventListener("click", function() {
    ob.printPost("", "\n\n\n  <div class=\"ob-sections\">\n      \n    \n     \n  <div\n    class=\"ob-section ob-section-html \"\n      >\n\n<div style=\"padding: 10px;\">\n<div style=\"padding: 2px 4px 0px 4px; border-radius: 5px 5px 0px 0px; box-shadow: 1px 2px 6px #808080; background-image: url('https:\/\/ekladata.com\/F55qbZn3CjWVKGst_HUopGUG00w.gif'); background-repeat: repeat; height: 100%;\">\n<div style=\"padding-left: 14px; padding-right: 14px; padding-top: 26px; border-radius: 5px 5px 0px 0px; box-shadow: inset 0px -3px 3px rgba(0,0,0,0.6), inset 0px 3px 3px rgba(252,255,255,0.7), 0px 7px 12px -2px rgba(0,0,0,0.8); background-image: url('https:\/\/lh3.googleusercontent.com\/-ie-2NcbpSHs\/WAeRbBEDMYI\/AAAAAAAAYBM\/aTH35RVSjZkkoXyQYV2DtEHRc1ZXtC8cQCL0B\/w120-d-h64-rw\/3.gif'); height: 100%; width: auto;\">\n<div style=\"text-align: center; padding-right: 0px;\"> <\/div>\n<\/div>\n<\/div>\n<div style=\"padding: 0px 0px 0px 0px;\">\n<div style=\"padding: 2px 4px 2px 4px; border-radius: 0px 0px 5px 5px; box-shadow: 1px 2px 6px #808080; background-image: url('https:\/\/ekladata.com\/F55qbZn3CjWVKGst_HUopGUG00w.gif'); background-repeat: repeat;\">\n<div style=\"padding-left: 10px; padding-right: 10px; border-radius: 0px 0px 5px 5px; background-color: #fff; height: 100%; width: auto;\">\n<div style=\"padding-top: 10px; padding-bottom: 11px;\">\n<p>http:\/\/codepen.io\/bboyle\/pen\/ElLfy<\/p>\n<label for=\"id1\">  HTML<\/label> <textarea id=\"id1\" class=\"large-compact\" cols=\"30\" rows=\"20\" name=\"text1\"><label for=\"id1\">First textarea<\/label><textarea class=\"large-compact\" name=\"text1\" id=\"id1\" cols=\"30\" rows=\"10\">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam sed dicta aliquam consectetur ipsum dolore omnis maiores laborum eveniet minus. Similique voluptatibus asperiores magnam deleniti a fuga minima adipisci tempora.<\/textarea><br \/><label for=\"id2\">Second textarea<\/label><textarea class=\"large-compact\" name=\"text2\" id=\"id2\" cols=\"30\" rows=\"20\"><\/textarea><label for=\"id3\">And another textarea<\/label><textarea class=\"large-compact\" name=\"text3\" id=\"id3\" cols=\"30\" rows=\"10\"><\/textarea><\/textarea> <label for=\"id2\">CSS<\/label> <textarea id=\"id2\" class=\"large-compact\" cols=\"30\" rows=\"10\" name=\"text2\"><style type=\"text\/css\"><\/style> <\/textarea> <label for=\"id3\">3ª textarea<\/label> <textarea id=\"id3\" class=\"large-compact\" cols=\"30\" rows=\"10\" name=\"text3\"><\/textarea> <br\/><br\/><br\/><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>    <\/div>\n\n\n            \n\n  <\/div>\n  ", "eklablog")
  })
</script>

<script>
  function isMobile() {
    return /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
  }
  if (isMobile()) {
    (function() {
      var fbBtn = document.querySelector('.fb-share-button');

if (fbBtn) {
        fbBtn.classList.add("mobile-custom")
        var shareBtn = document.createElement('a');
        shareBtn.href = `https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Ftutorialgloriav.eklablog.com%2F-a118170498&t=`;
        shareBtn.target = "_blank";
        shareBtn.rel = "noopener noreferrer";

shareBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"/></svg>';

fbBtn.appendChild(shareBtn);
      }
    }())
  } else {
    (function(d, s, id){
        var js, fjs = d.getElementsByTagName(s)[0];
        if (!d.getElementById(id)) {
            js = d.createElement(s);
            js.type = 'text/javascript';
            js.async = true;
            js.defer = true;
            js.id = id;
            js.src = 'https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v25.0';
            fjs.parentNode.insertBefore(js, fjs);
        }
    }(document, 'script', 'facebook-jssdk'));
  }
</script>

<script>
    (function(d, s, id){
        var js, fjs = d.getElementsByTagName(s)[0];
        if (!d.getElementById(id)) {
            js = d.createElement(s);
            js.type = 'text/javascript';
            js.async = true;
            js.defer = true;
            js.id = id;
            js.src = 'https://platform.twitter.com/widgets.js';
            fjs.parentNode.insertBefore(js, fjs);
        }
    }(document, 'script', 'twitter-jssdk'));
</script>

<div class="ob-Newsletter">
  <button class="ob-input ob-Newsletter-toggle">S'inscrire à la newsletter</button>
  <div class="ob-Newsletter-box">
    <div class="ob-Newsletter-description">Pour être informé des derniers articles, inscrivez vous :</div>
    <form class="ob-Newsletter-form" action="/mail/subscribe?utm_source=_ob_abo_newsletter&utm_medium=_ob_bottom_article" method="post">
      <input class="ob-input ob-Newsletter-input" type="email" name="email" placeholder="Saisissez votre email ici" required="required" />
      <input class="ob-input ob-Newsletter-submit" type="submit" value="Valider" />
    </form>
  </div>
</div>
<script>
  var toggle = document.querySelector(".ob-Newsletter-toggle")
  var box = document.querySelector(".ob-Newsletter-box")
  toggle.addEventListener("click", function (event) {
    box.classList.toggle("ob-Newsletter-box--open")
  })
</script>

<div class="ob-Related">
            <div class="ob-h3 ob-Related-title">Vous aimerez aussi :</div>
            <div class="ob-Related-posts">
                                <div class="ob-Related-post">
                    <div class="ob-RelatedPost">
  <a class="ob-RelatedPost-link" href="https://tutorialgloriav.eklablog.com/-a132530058" title="">
          <img class="ob-RelatedPost-image" src="https://image.eklablog.com/s1KdErlwC1R7zQnuu94hhCV2xs4=/400x260/smart/filters:no_upscale()/https%3A%2F%2Flh3.googleusercontent.com%2F-drj07eUI7IQ%2FWfshPpdTtLI%2FAAAAAAADOm4%2FTd99GxjOCOENdzzPzZLDN5FnnBj4D7NSgCJoC%2Fw320-h240-rw%2F17.gif" alt=""/>
    
    <div class="ob-RelatedPost-title" >
              Article publié depuis Eklablog          </div>
  </a>
</div>
                </div>
                                <div class="ob-Related-post">
                    <div class="ob-RelatedPost">
  <a class="ob-RelatedPost-link" href="https://tutorialgloriav.eklablog.com/-a132530010" title="">
          <img class="ob-RelatedPost-image" src="https://image.eklablog.com/vrxVjn1pjmR9-I1OYWbFVtaZ3Tk=/400x260/smart/filters:no_upscale()/https%3A%2F%2Flh3.googleusercontent.com%2F-6eSJcfFteoM%2FWfsidlbFYVI%2FAAAAAAADOrE%2Fj2oNYgt8VzE4jsWh8vwdiBuDNlFKZlGMwCJoC%2Fw292-h468-rw%2F20a.gif" alt=""/>
    
    <div class="ob-RelatedPost-title" >
              Article publié depuis Eklablog          </div>
  </a>
</div>
                </div>
                                <div class="ob-Related-post">
                    <div class="ob-RelatedPost">
  <a class="ob-RelatedPost-link" href="https://tutorialgloriav.eklablog.com/-a132529860" title="">
          <img class="ob-RelatedPost-image" src="https://image.eklablog.com/PA_dUGBfsnf4SVyDzXLkEUtH7VU=/400x260/smart/filters:no_upscale()/https%3A%2F%2Flh3.googleusercontent.com%2F-Z71wS6lOmNE%2FWfyAV46cGSI%2FAAAAAAADOxM%2FzuCej6ophBAa0HTDh4C7GzB-lh0h0fYTQCJoC%2Fw356-h555-rw%2F2.gif" alt=""/>
    
    <div class="ob-RelatedPost-title" >
              Article publié depuis Eklablog          </div>
  </a>
</div>
                </div>
                                <div class="ob-Related-post">
                    <div class="ob-RelatedPost">
  <a class="ob-RelatedPost-link" href="https://tutorialgloriav.eklablog.com/-a132529810" title="">
          <img class="ob-RelatedPost-image" src="https://image.eklablog.com/S8Mhv-ltnpAwfjGimMWVLIF-C0s=/400x260/smart/filters:no_upscale()/https%3A%2F%2Flh3.googleusercontent.com%2F-GgWdAE3rGjI%2FWfyQTJujPRI%2FAAAAAAADO0w%2FJPSejYaMeFcu9oHRK1G1NLPYVRp9w30eACJoC%2Fw360-h540-rw%2F1.gif" alt=""/>
    
    <div class="ob-RelatedPost-title" >
              Article publié depuis Eklablog          </div>
  </a>
</div>
                </div>
                            </div>
        </div>
        <style>
            @media only screen and (min-width: 970px) {
            .ob-Related-posts {
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                -moz-box-wrap: nowrap;
                -webkit-box-wrap: nowrap;
                -webkit-flex-wrap: nowrap;
                -ms-flexbox-wrap: nowrap;
                -ms-flex-wrap: nowrap;
                flex-wrap: nowrap;
                -moz-box-direction: row;
                -webkit-box-direction: row;
                -webkit-box-orient: horizontal;
                -webkit-flex-direction: row;
                -ms-flexbox-direction: row;
                -ms-flex-direction: row;
                flex-direction: row;
            }

.ob-Related-post {
                    -webkit-box-basis: auto;
                    -webkit-flex-basis: auto;
                    -ms-flex-basis: auto;
                    flex-basis: auto;
                    -webkit-box-flex: 1;
                    -moz-box-flex: 1;
                    -webkit-flex: 1;
                    -ms-flex: 1 0 auto;
                    flex: 1;
                    margin-bottom: 0;
                }

.ob-Related-post:not(:last-child) {
                    margin-right: 10px;
                }
            }
        </style>
    
                        
                                        </div>
                
                <div class="Pagination">
                                    </div>

<div class="Comments">
                    <div class="ob-h3">Commenter cet article</div>
                    <div>
                                                    
<div id="ob-comments">
			<button class="ob-button-primary" disabled>
			Ajouter un commentaire
		</button>
		<div class="ob-list">
			</div>
</div>

<script>
	var isCommentAppInitialized = false;

function initCommentApp(){
		if(!isCommentAppInitialized){
			ob.initCommentApp(document.querySelector("#ob-comments"), {"postID":4019251,"locale":"fr","I18N":{"reply":"R\u00e9pondre","moderated":"Votre commentaire a bien \u00e9t\u00e9 envoy\u00e9.<br\/>Il s\u2019affichera une fois approuv\u00e9 par le propri\u00e9taire du blog.","recaptcha_disclaimer":"Ce site est prot\u00e9g\u00e9 par reCAPTCHA et les <a target=\"_blank\" rel=\"noreferer,noopener\" href=\"https:\/\/policies.google.com\/privacy\">Politiques de confidentialit\u00e9<\/a> et <a target=\"_blank\" rel=\"noreferer,noopener\" href=\"https:\/\/policies.google.com\/terms\">Conditions de service<\/a> de Google s'appliquent.","recaptcha_expired":"recaptcha_expired","recaptcha_error":"recaptcha_error","more_comments":"Charger plus de commentaires","more_replies":"Charger plus de r\u00e9ponses","author":"Auteur","name_placeholder":"Nom","email_placeholder":"Email","website_placeholder":"Site web","comment_placeholder":"Votre commentaire","send_comment":"Envoyer le commentaire","comment_with_overblog":"Commenter avec votre compte Eklablog","logout":"Se d\u00e9connecter","add_comment":"Ajouter un commentaire","generic_error":"Es ist ein Fehler aufgetreten, bitte versuchen Sie es sp\u00e4ter noch einmal"},"brand":"eklablog"});
			isCommentAppInitialized = true
		}
	}

setTimeout(initCommentApp, 2000)
	window.addEventListener('load', initCommentApp)
</script>

</div>
                </div>
                            </div>

<aside class="Sidebar">

<div class="Sidebar-widget" data-order="2">
                <div class="Sidebar-about SidebarSubscribe">
                    <div class="ob-h3 Sidebar-title">
                        Newsletter
                    </div>
                    <form class="Sidebar-form" action="/mail/subscribe?utm_source=_ob_abo_newsletter&utm_medium=_ob_sidebar" method="post">
                        <input class="ob-input SidebarForm-input" type="email" name="email" placeholder="Saisissez votre email ici" required="required" />
                        <input class="ob-input ob-input-submit SidebarForm-submit" type="submit" value="S'abonner" />
                    </form>
                </div>
              </div>

<div class="Sidebar-widget Sidebar-about SidebarAbout" data-order="3">
                    <div class="ob-h3 Sidebar-title">
                        
                    </div>
                                        <p class="SidebarAbout-description">
                        Tutorial, CSS, HTML
                                                    <br>Voir le profil de <a href="https://www.eklablog.com/user/333295.html" target="_blank">GloriaV</a> sur le portail Eklablog
                                            </p>
                </div>

<div class="Sidebar-widget" data-order="5">
                  <div class="ob-h3 Sidebar-title">
                                            Suivez-moi
                                      </div>
                  <ul class="Sidebar-follow SidebarFollow">
                                                                                                              <li class="SidebarFollow-element">
                          <a class="SidebarFollow-elementLink SidebarFollow-elementLink--rss" href="/rss" target="_blank">
                              <span class="fa fa-fw fa-rss"></span>
                          </a>
                      </li>
                  </ul>
                </div>

<div class="Sidebar-widget Sidebar-about SidebarAbout" data-order="4">
                        <div class="ob-h3 Sidebar-title">
                            À propos
                        </div>
                                                                            <a href="https://www.eklablog.com/user/333295.html" target="_blank">
                                                        <img class="SidebarAbout-avatar" src="https://image.eklablog.com/LYX6vCgy7VchPpruWFW7GR2ZN0c=/300x300/smart/filters:no_upscale()/https%3A%2F%2Fekladata.com%2Fj8TA7u2vBt7maG9CHh9APsLmuIk.gif" alt="GloriaV" />
                                                    </a>
                                                                            <p class="SidebarAbout-description">
                            
                                                            <br>Voir le profil de <a href="https://www.eklablog.com/user/333295.html" target="_blank">GloriaV</a> sur le portail Eklablog
                                                    </p>
                    </div>

</aside>
        </div>

<div class="Footer">
            <p class="Footer-content">
                                    Thème Magazine © - 
                                Hébergé par <a href="https://www.eklablog.com" target="_bank">Eklablog</a>
            </p>

</div>

<script type="text/javascript">
            jQuery(document).ready(function() {
                /* Menu */
              $(".Nav-menuButton").click(function(){
                                  if($(".Nav-menu").hasClass("Nav-menu--open")) {
                    $(".Nav-menu").removeClass("Nav-menu--open");
                  } else {
                    $(".Nav-menu").addClass("Nav-menu--open");
                  }
                              });

/* Search */
                $(".NavSearch-icon").click(function(){
                    if($(".NavSearch").hasClass("NavSearch--open")) {
                        if($(".NavSearch-input").val().length === 0) {
                            $(".NavSearch").removeClass("NavSearch--open");
                        } else {
                            $(".NavSearch-form").submit();
                        }

} else {
                        $(".NavSearch").addClass("NavSearch--open");
                    }
                });

/* Fancybox */
                $(".ob-link-img, .author-avatar, .blog-avatar, .asset-img-link, .avatar").attr("rel", "fancybox");
                $("a[rel=fancybox]").fancybox({
                    'overlayShow'   : true,
                    'transitionIn'  : 'fadin',
                    'transitionOut' : 'fadin',
                    'type'          : 'image'
                });

window.addEventListener("resize", function() {
                if (window.innerWidth > 970) {
                  $(".menu-main").removeClass("menu-main--open");
                }
              })

});
        </script>

<script async defer>
          function createDropdownTrigger() {
            var trigger = document.createElement("span")
            trigger.classList.add("trigger")
            return trigger
          }

function addTriggers() {
            var elementsToTriggers = document.querySelectorAll(".menu_level_1 > .branch > span, .menu_level_1 > .branch > a")
            elementsToTriggers.forEach(function(elementToTrigger) {
              elementToTrigger.insertAdjacentElement("afterend", createDropdownTrigger())
            })
          }

function triggerLevelHidden() {
            var lastMenuLevelElements = document.querySelectorAll(".menu_level_0")
            if (lastMenuLevelElements[0]) {
              lastMenuLevelElements.forEach(function(lastMenuLevelElement) {
                if (window.innerWidth <= 970) {
                  lastMenuLevelElement.classList.add("level_hidden")
                } else {
                  lastMenuLevelElement.classList.remove("level_hidden")
                }
              })
            }
          }

function handleDropdown() {
            var triggers = document.querySelectorAll(".trigger")
            var openSection = null;
            triggers.forEach(function(trigger) {
              trigger.addEventListener("click", function(e) {
                var menuLevel0 = e.target.nextElementSibling
                if (menuLevel0.style.maxHeight) {
                  menuLevel0.style.maxHeight = null
                  trigger.style.transform = "rotate(-45deg)"
                  openSection = null;
                }  else {
                  if (openSection) {
                    openSection.style.maxHeight = null;
                    openSection.previousElementSibling.style.transform = "rotate(-45deg)";
                  }
                  menuLevel0.style.maxHeight = menuLevel0.scrollHeight + "px"
                  trigger.style.transform = "rotate(45deg)"
                  openSection = menuLevel0;
                }
              })
            })
          }

(function init() {
            addTriggers()
            triggerLevelHidden()
            handleDropdown()
          })()

window.addEventListener("resize", function(e) {
            triggerLevelHidden()
          })
        </script>

<div class="ob-footer" id="legals" >
    <ul>
        <li class="ob-footer-item">Voir le profil de <a href="https://www.eklablog.com/user/333295.html" target="_blank">GloriaV</a> sur le portail Eklablog</li>
                <li class="ob-footer-item"><a href="/top">Top articles</a></li>
        <li class="ob-footer-item"><a href="/contact">Contact</a></li>
        <li class="ob-footer-item"><a href="https://www.eklablog.com/abuse/506131"> Signaler un abus </a></li>
        <li class="ob-footer-item"><a href="https://www.eklablog.com/terms-of-use" target="_blank">C.G.U.</a></li>
            <li class="ob-footer-item"><a href="https://www.eklablog.com/cookies" target="_blank">Cookies et données personnelles</a></li>
        <li class="ob-footer-item"><a href="javascript:Didomi.notice.show()">Préférences cookies</a></li>
    </ul>
</div>

<script>
    (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
              new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
            j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
            'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer', "GTM-WG3SK3P");
  </script>
    <script src="https://assets.over-blog-kiwi.com/b/blog/v2026.07.02/obfuscated_link.4b3f12e9.js"></script>
 </body>
</html>