Archive of Our Own

[ “We sure did.” ]
[ “It was no big deal.” ]
[ “You acted like a weirdo.” ]

[ “Roses, no question.” ]
[ “Sunflowers full of energy!” ]
[ “It’s gotta be tulips.” ]
[ “I like gerbera.” ]

Example HTML Code

<p class="p3p-select" align="center">
  <span class="choices">
    <span>
      <span>[</span>
      “We sure did.”
      <span>]</span>
    </span>
    <br />

    <span>
      <span>[</span>
      “It was no big deal.”
      <span>]</span>
    </span>
    <br />

    <span>
      <span>[</span>
      “You acted like a weirdo.”
      <span>]</span>
    </span>
  </span>
</p>

<p class="p3p-select femc" align="center">
  <span class="choices">
    <span>
      <span>[</span>
      “Roses, no question.”
      <span>]</span>
    </span>
    <br />

    <span>
      <span>[</span>
      “Sunflowers full of energy!”
      <span>]</span>
    </span>
    <br />

    <span>
      <span>[</span>
      “It’s gotta be tulips.”
      <span>]</span>
    </span>
    <br />

    <span>
      <span>[</span>
      “I like gerbera.”
      <span>]</span>
    </span>
  </span>
</p>

CSS Code

/* P3P Dialog Select - Container */

#workskin .p3p-select {
  background-color: #c3cbc2D0;
  border: 5px solid #C3CBC2;
  border-radius: 10px;
  box-shadow: 2px 2px #00000080, -10px 0 inset #C3CBC2;
  display: block;
  text-align: left;
  position: relative;
  width: 500px;
  max-width: 95%;
  z-index: 1;
}

#workskin .p3p-select .choices::after {
  content: '';
  background-image: url('https://i.imgur.com/fI9sKgt.png');
  background-position: top -50px right -110px;
  background-size: 320%;
  background-repeat: no-repeat;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  display: block;
  filter: drop-shadow(-10px 0 #418AFD);
  position: absolute;
  top: 0;
  right: 10px;
  height: 100%;
  width: 100px;
  z-index: 1;
}

#workskin .p3p-select br {
  display: none;
}

/* P3P Dialog Select - Text */

#workskin .p3p-select > .choices {
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-right: 10px;
  padding: 3px;
  min-height: 60px;
}

#workskin .p3p-select > .choices > span,
#workskin .p3p-select > .choices > a {
  border-bottom: 0;
  border-radius: 3px;
  color: #2459B5;
  cursor: pointer;
  display: inline-block;
  padding-left: 5px;
  padding-right: 20%;
  position: relative;
  width: 68%;
  z-index: 0;
}

#workskin .p3p-select > .choices > b,
#workskin .p3p-select > .choices > span:hover,
#workskin .p3p-select > .choices > a:hover {
  background-color: #418AFD;
  color: white;
}

#workskin .p3p-select > .choices > b > span,
#workskin .p3p-select > .choices > span > span,
#workskin .p3p-select > .choices > a > span {
  display: none;
}

/* P3P Dialog Select - Unavailable Choice */

#workskin .p3p-select > .choices > span.strike {
  cursor: default;
  opacity: 0.5;
  text-decoration: line-through;
}

#workskin .p3p-select > .choices > span.strike:hover {
  background-color: transparent;
  color: #2459B5;
}

/* P3P Dialog Select - FeMC Theme */

#workskin .p3p-select.femc .choices::after {
  background-image: url('https://i.imgur.com/ZH1sMbO.png');
  background-position: top -50px right -60px;
  background-size: 280%;
  filter: drop-shadow(-10px 0 #EC447F);
}

#workskin .p3p-select.femc > .choices > span,
#workskin .p3p-select.femc > .choices > a, {
  color: #b52452;
}

#workskin .p3p-select.femc > .choices > b,
#workskin .p3p-select.femc > .choices > span:hover,
#workskin .p3p-select.femc > .choices > a:hover {
  background-color: #EC447F;
  color: white;
}

#workskin .p3p-select.femc > .choices > span.strike:hover {
  color: #b52452;
}

Adding CYOA-Style Links

Which of my Persona 3 work skins would you like to use?

[ 1 – My Persona 3 Portable SL Rank Up display. ]
[ 2 – My Persona 3 Reload text boxes. ]
[ 3 – Can I get something else? ]

This code supports having each choice act as a hyperlink to something else, with the ones that aren’t appearing more faded out. To do this, simply replace the requisite <span> tag with <a>, alongside an appropriate link. Unavailable choices should be marked with the ‘.strike’ class.

<p class="p3p-select" align="center">
  <span class="choices">
    <a href="https://archiveofourown.org/works/62085181">
      <span>[ 2 –</span>
      My <i>Persona 3 Reload</i> text boxes.
      <span>]</span>
    </a>
    <br />

    <span class="strike">
      <span>[ 3 –</span>
      Can I get something else?
      <span>]</span>
    </span>
  </span>
</p>