UI design, must do this, click on the right side of the little red dot, and how to write the small red circle?
UI design, must do this, click on the right side of the little red dot, and how to write the small red circle?
< html lang= "en" >
< head >
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.hide {
display: none;
}
.square {
background-color: -sharpfff;
border: 1px solid -sharpbfbfbf;
display: inline-block;
height: 0.9em;
padding: 2px;
border-radius: 100%;
margin-right: 5px;
margin-top: -2px;
vertical-align: middle;
width: 0.9em;
line-height: 1;
box-sizing: content-box;
}
.hide:checked+.square:after {
background-color: -sharpffd958;
content: "";
display: inline-block;
height: 0.9em;
width: 0.9em;
vertical-align: top;
border-radius: 100%;
}
</style>< / head >
< body >
<label>
<input class="hide" type="radio" name="sex" id="tbb">
<span class="square"></span>
<span>b</span>
</label>
<label>
<input class="hide" type="radio" name="sex" id="tbg">
<span class="square"></span>
<span>g</span>
</label>
< / body >
< / html >
the general component uses a background image, which you can see when reviewing elements, and then add class, separately to modify the background image under class
<span><div></div></span><a href="-sharp"></a>
<span><div></div></span><a href="-sharp"></a>
<script>
window.onload = function(){
var divs = document.getElementsByTagName("div"),
spans = document.getElementsByTagName("span");
for(var i = 0 ; i < divs.length ; iPP){
spans[i].index = i;
spans[i].onclick = function(){
divs[this.index].style.background = "red";
}
}
}simply wrote one, which can be used as a reference.
Previous: React native statusbar
Next: Why does my sublimeText3 pop up the npm install window as long as it saves the file with CTRL + s?
for parsing, a.b and a [b] are both written to get object properties. But the difference is that the b of a [b] can only be a string. how does the following code parse, and why is the output value 345345333? var a = {}; var b = {key: b }; var c ...
how can I implement the other checkbox, that is unselectable and clear the previously selected checkbox, when I click 2018 to plan the layout? ...
Analog data can be sorted the server will report an error upon request....
swiper player is used for page sliding. Video.js is based on nuxt server rendering . Now there is such a problem. When the page slides left and right, the player always fails to follow the page sliding in time and always lags behind. there is no pro...
for example, how to answer this interview question ...
I set the parent element to relative and the child element position to absolute positioning, but why does the font position change relative to the background when I zoom in and out? In the screenshot below, you can see the zoom in and out of the page, a...
as shown in the picture, the effect is that the mouse moves over the picture, the picture is hidden, and the corresponding introduction is displayed. <li> <div><img src= >< div> <div>< div> < li>...
at first I didn t write the CSS and HTML of the main area the following code is the sidebar CSS, page effect as shown in figure 2 main ...
...
ask God to debug https: codepen.io xyj pen KR. without changing the drop-down arrow toward the time effect chart. everything is fine, click the entry for details. Now I want to change the direction of the arrow when the details appear. So I want ...
Environment : ionic1.3.4 problem description : when the focus is located in the input field, the page jumps up and down. (seaweed) the beating process of is not cyclic; the closer the is to the keyboard, the greater the amplitude is. I think th...
the following code: document.querySelector(".div-bgd").style.display = "block"; document.querySelector(".load_div").style.display = "block"; console.log(1) alert(1) In the browser environment, why execute conso...
in general, take the html file as the entry, automatically find dependent images, css and js, and then name and package them with hash. The referenced images of the new html file, css and js, will be changed to the new name with the hash code. I have ...
vuetabboxtabbox <template> <div :class="tabStyle" :style="boxstyle" @click="tabClick(name)"> {{name}} <div class="selected-icon" v-show="isSelected">< div> ...
: ajaxresonseJSONundefined A piece of meat is right in front of you, but you don t have the heart to hit people. ...
I got value, but push it into the history array. There is no value in history searchinto(e) { console.log(e) const value = this.data.search.content; const history = this.data.history; console.log(value); history.push[value]; ...
The DIVHTML: plug-in is AngularJS. ...
there is usually a fixed process when developing a SPA like Vue, such as scaffolding to generate npm dependencies, then install dependencies, personalize Webpack configuration, jslint configuration, and then start writing components and so on. what ar...
< el-upload class="upload-demo" ref="upload" :action="url" name="Content" :data="form" :on-rem...
for example, I have a dynamic string like 1232 {Button 1} {Button 2} 765432 (variable length). How can I get 1231 and {Button 1}, {Button 2}, 765432? ...