0
必要な入力フィールドのアスタリスクを含む右上隅の三角形を作成したいとします。私はアスタリスクをinputboxの中に赤い背景で置きました。私はアスタリスクを含むボックスを右上隅の三角形にする方法を知らない。誰にも何か提案がありますか？ここで私のコードは、アスタリスクボックスを制御するクラスは、CSSの部分の最後のものです。入力フィールド内の右上隅の三角形
* {
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-font-smoothing:antialiased;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
.container_contact {
max-width:400px;
width:100%;
}
.contact_input, .contact_textarea {
font:400 12px/16px "Open Sans", Helvetica, Arial, sans-serif;
}
#contact_me {
background:#F9F9F9;
padding:25px;
padding-top: 0px;
border: 1px solid #e8e8e8;
}
#contact_me h3 {
margin-top: 5px;
margin-bottom: 0px;
color: #F96;
font-size: 30px;
font-weight: 400;
}
#contact_me h4 {
font-size:13px;
}
fieldset {
border: medium none !important;
margin: 0 0 10px;
min-width: 100%;
padding: 0;
width: 100%;
}
.contact_input, .contact_textarea {
width:100%;
border:1px solid #CCC;
background:#FFF;
margin:0 0 5px;
padding:10px;
}
.contact_input:hover, .contact_textarea:hover {
-webkit-transition:border-color 0.3s ease-in-out;
-moz-transition:border-color 0.3s ease-in-out;
transition:border-color 0.3s ease-in-out;
}
.contact_textarea {
height:100px;
max-width:100%;
min-width: 100%;
}
#contact_me button[type="submit"] {
cursor:pointer;
width:100%;
border:none;
background:#0CF;
color:#FFF;
margin:0 0 5px;
padding:10px;
font-size:15px;
}
#contact_me button[type="submit"]:hover {
background:#09C;
-webkit-transition:background 0.3s ease-in-out;
-moz-transition:background 0.3s ease-in-out;
transition:background-color 0.3s ease-in-out;
}
#contact button[type="submit"]:active {
box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
.error {
border: 2px solid red;
}
.valid {
border: 2px solid green;
}
[id$='-error'] {
background: #c51244;
padding: 10px;
border: 0;
position: relative;
box-shadow: 1px 1px 1px #aaaaaa;
display: none;
margin-top: -11px;
margin-bottom: 5px;
}
[id$='-error']:before {
content: '';
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #c51244;
position: absolute;
top: -10px;
}
.required_asterisk {
position: relative;
display: inline-block;
z-index: 1;
}
.required_asterisk input {
padding-right: 35px;
}
.required_asterisk:after {
content: "*";
position: absolute;
background-color: red;
text-align: right;
height: 85%;
width: 30px;
right: 0px;
top: 0px;
color: white;
z-index: 5;
}<div class="container_contact">
<form id="contact_me" action="" method="post">
<h3>Kontakt meg</h3>
<h4>Kontakt meg idag, og få svar innen 24 timer!</h4>
<fieldset class="required_asterisk">
<input placeholder="Ditt navn" name="contact_name" id="contact_name" class="contact_input required" type="text" tabindex="1" autofocus>
</fieldset>
<fieldset>
<input placeholder="Din email adresse" name="contact_mail" id="contact_mail" class="contact_input" type="text" tabindex="2">
</fieldset>
<fieldset>
<input placeholder="Firma navn (valgfri)" name="contact_firmname" id="contact_firmname" class="contact_input" type="text" tabindex="3">
</fieldset>
<fieldset>
<input placeholder="Ditt telefon nummer (valgfri)" name="contact_tel" id="contact_tel" class="contact_input" type="text" tabindex="4">
</fieldset>
<fieldset>
<input placeholder="Din/deres web side (valgfri)" name="contact_webpage" id="contact_webpage" class="contact_input" type="text" tabindex="5">
</fieldset>
<fieldset>
<input placeholder="Emne" id="contact_subject" name="contact_subject" class="contact_input" type="text" tabindex="6">
</fieldset>
<fieldset>
<textarea placeholder="Din melding..." id="contact_message" class="contact_textarea" name="contact_message" tabindex="7"></textarea>
</fieldset>
<fieldset>
<button name="submit" type="submit" name="contact_submit" id="contact_submit" onclick="" data-submit="...Sending">Send melding</button>
</fieldset>
</form>
</div>