title: CSS editing of textfields to speech bubble
body: <p>I am creating my first chat program (with graphics in java) and i am using JavaFx Scene builder to create a GUI that contains of some pictures and then 1 - 2 men who can then chat with eachother.
  the idea is that that when ever 1 of the clients that are connected to the server communicates with the other a small speech bubble will show.</p>
  
  <p>My idea was to create this using a textfield that i would then edit in CSS so it will look like a speech-bubble.</p>
  
  <p>how ever i have tried to look for the css style sheet to be able to configure my textfield but so far nothing has worked is anyone able to help me with this? so far the two style sheets ive tried are these:</p>
  
  <pre><code>    .speech-bubble {
      position:relative;
      width: 320px;
      padding: 10px;
      margin: 3em;
      background-color:#FFF;
      color: #666;
      font: normal 12px "Segoe UI", Arial, Sans-serif;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      border-radius: 10px;
      border: 10px solid rgba(0,0,0,0.095);
  }
  .speech-bubble p {
      font-size: 1.25em;
  }
  
  .speech-bubble:before,
  .speech-bubble:after {
      content: "\0020";
      display:block;
      position:absolute;
      top:-20px;  /* Offset top the height of the pointer's border-width */
      left:20px;
      z-index:2;
      width: 0;
      height: 0;
      overflow:hidden;
      border: solid 20px transparent;
      border-top: 0;
      border-bottom-color:#FFF;
  }
  .speech-bubble:before {
      top:-30px; /* Offset of pointer border-width + bubble border-width */
      z-index:1;
      border-bottom-color:rgba(0,0,0,0.095);
  }
  
  
      .bubble{
      background-color: #F2F2F2;
      border-radius: 5px;
      box-shadow: 0px 0px 6px #B2B2B2;
      height: 200px;
      margin: 20px;
      width:  275px;
  }
  
  .bubble::after {
      background-color: #F2F2F2;
      box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 );
      content: "\00a0";
      display: block;
      height: 20px;
      left: -10px;
      position: relative;
      top: 20px;
      transform: rotate( 45deg );
      width:  20px;
  }
  </code></pre>
  
  <p>The problem is when i add this to my textfield it does not change apperance i dont know if i am doing it wrong or if these style sheets does not fit a textfield</p>
  
  <p>Hope someone is able to help me thank you in advance:</p>