Question

我想创建一些完全基于图像的复选框。这意味着当我点击该图像时，边框颜色会变为某种颜色：让我们说蓝色并保持蓝色直到下一次点击取消它。问题是我不知道从哪里开始，我已经创建了某种带有绿色标记的复选框基本图像，但我没有成功将它们转换为我想要的请求。这是最终结果，我需要得到：

图片通过以下链接托管在tinypic上： http://i68.tinypic.com/b5496s.jpg http://i67.tinypic.com/2vdk07r.png

到目前为止，这是我的代码，根本没有正确的方向：

input[type="checkbox"]:not(old){
  width: 28px;
  margin: 0;
  padding: 0;
  opacity: 0;
}

input[type="checkbox"]:not(old)+label{
  display: inline-block;
  margin-left: -28px;
  padding-left: 28px;
  line-height: 24px;
  background: url(http://code.stephenmorley.org/html-and-css/styling-checkboxes-and-radio-buttons/checks.png) no-repeat 0 0;
}

input[type="checkbox"]:not(old):checked + label{
   background-position : 0 -24px;
}

<div class="checkbox">
  <input id="chk1" type="checkbox" name="animal" value="dog"/>
  <label id="lbl1" >Dog</label>
  <br>
  <input id="chk2" type="checkbox" name="animal" value="cat"/>
  <label id="lbl2" >Cat</label>
  <br>
  <input id="chk3" type="checkbox" name="animal" value="horse"/>
  <label id="lbl3" >Horse</label>
</div>

Answer 1

使用此HTML：

    2016-03-07 15:42:10.914 LiveRoom[1173:1362453] -> registered mono modules 0x1016ae5f0
2016-03-07 15:42:11.372 LiveRoom[1173:1362453] You've implemented -[<UIApplicationDelegate> application:didReceiveRemoteNotification:fetchCompletionHandler:], but you still need to add "remote-notification" to the list of your supported UIBackgroundModes in your Info.plist.
-> applicationDidFinishLaunching()
-> applicationDidBecomeActive()
Renderer: Apple A7 GPU
Vendor:   Apple Inc.
Version:  OpenGL ES 2.0 Apple A7 GPU - 75.11.5
GLES:     2
GL_OES_depth_texture GL_OES_depth_texture_cube_map GL_OES_depth24 GL_OES_element_index_uint GL_OES_fbo_render_mipmap GL_OES_mapbuffer GL_OES_packed_depth_stencil GL_OES_rgb8_rgba8 GL_OES_standard_derivatives GL_OES_texture_float GL_OES_texture_half_float GL_OES_texture_half_float_linear GL_OES_vertex_array_object GL_EXT_blend_minmax GL_EXT_color_buffer_half_float GL_EXT_debug_label GL_EXT_debug_marker GL_EXT_discard_framebuffer GL_EXT_draw_instanced GL_EXT_instanced_arrays GL_EXT_map_buffer_range GL_EXT_occlusion_query_boolean GL_EXT_pvrtc_sRGB GL_EXT_read_format_bgra GL_EXT_separate_shader_objects GL_EXT_shader_framebuffer_fetch GL_EXT_shader_texture_lod GL_EXT_shadow_samplers GL_EXT_sRGB GL_EXT_texture_filter_anisotropic GL_EXT_texture_rg GL_EXT_texture_storage GL_APPLE_clip_distance GL_APPLE_color_buffer_packed_float GL_APPLE_copy_texture_levels GL_APPLE_framebuffer_multisample GL_APPLE_rgb_422 GL_APPLE_sync GL_APPLE_texture_format_BGRA8888 GL_APPLE_texture_max_level GL_APPLE_texture_packed_float GL_IMG_r

ead_format GL_IMG_texture_compression_pvrtc 
OPENGL LOG: Creating OpenGL ES 2.0 graphics device
Initialize engine version: 5.3.1f1 (cc9cbbcc37b4)
WARNING: Shader Unsupported: 'Standard' - Pass 'FORWARD' has no vertex shader
WARNING: Shader Unsupported: 'Standard' - Pass 'FORWARD_DELTA' has no vertex shader
WARNING: Shader Unsupported: 'Standard' - Pass 'SHADOWCASTER' has no vertex shader
WARNING: Shader Unsupported: 'Standard' - All passes removed
UnloadTime: 9.839791 ms
Setting BehaviourComponentFactory
Vuforia.ComponentFactoryStarterBehaviour:SetBehaviourComponentFactory()
Vuforia.ComponentFactoryStarterBehaviour:Awake()
UnityEngine.GameObject:AddComponent()

(Filename: /Users/builduser/buildslave/unity/build/artifacts/generated/common/runtime/UnityEngineDebugBindings.gen.cpp Line: 37)

2016-03-07 15:42:13.230 LiveRoom[1173:1362453] -[VuforiaNativeRendererController fetchID]: unrecognized selector sent to instance 0x126db7510
2016-03-07 15:42:13.315 LiveRoom[1173:1362453] Uncaught exception: NSInvalidArgumentException: -[VuforiaNativeRendererController fetchID]: unrecognized selector sent to instance 0x126db7510
(
    0   CoreFoundation                      0x0000000182401918 <redacted> + 148
    1   libobjc.A.dylib                     0x0000000181a6ff80 objc_exception_throw + 56
    2   CoreFoundation                      0x000000018240861c <redacted> + 0
    3   CoreFoundation                      0x00000001824055b8 <redacted> + 872
    4   CoreFoundation                      0x000000018230968c _CF_forwarding_prep_0 + 92
    5   LiveRoom                            0x000000010010b730 _Z7fetchIDv + 100
    6   LiveRoom                            0x000000010012cad8 QRCodeScanner_Start_m1917009403_0 + 316
    7   LiveRoom                            0x0000000100750648 _Z33RuntimeInvoker_Void_t_224166001_0PK10MethodInfoPvPS2_ + 28
    8   LiveRoom                            0x0000000101528b9c _ZN6il2cpp2vm7Runtime6InvokeEPK10MethodInfoPvPS5_PP12Il2CppObject + 68
    9   LiveRoom                            0x0000000100edbc20 _ZN19ScriptingInvocation6InvokeEPP18ScriptingExceptionb + 56
    10  LiveRoom                            0x0000000100ed1ef4 _ZN13MonoBehaviour30InvokeMethodOrCoroutineCheckedE21ScriptingMethodIl2CppP15ScriptingObjectPP18ScriptingException + 1076
    11  LiveRoom                            0x0000000100ed20d8 _ZN13MonoBehaviour30InvokeMethodOrCoroutineCheckedE21ScriptingMethodIl2CppP15ScriptingObject + 52
    12  LiveRoom                            0x0000000100dba220 _ZN18DelayedCallManager6UpdateEi + 668
    13  LiveRoom                            0x0000000100e8bb2c _Z10PlayerLoopbbP10IHookEvent + 496
    14  LiveRoom                            0x000000010106a028 _ZL19UnityPlayerLoopImplb + 20
    15  LiveRoom                            0x00000001000f71fc UnityRepaint + 328
    16  LiveRoom                            0x0000000100107528 -[UnityAppController(ViewHandling) showGameUI] + 192
    17  LiveRoom                            0x0000000100103c48 -[UnityAppController startUnity:] + 284
    18  Foundation                          0x0000000182db644c __NSFireDelayedPerform + 428
    19  CoreFoundation                      0x00000001823b95f4 <redacted> + 28
    20  CoreFoundation                      0x00000001823b9298 <redacted> + 884
    21  CoreFoundation                      0x00000001823b69ac <redacted> + 1520
    22  CoreFoundation                      0x00000001822e5680 CFRunLoopRunSpecific + 384
    23  GraphicsServices                    0x00000001837f4088 GSEventRunModal + 180
    24  UIKit                               0x000000018715cd90 UIApplicationMain + 204
    25  LiveRoom                            0x00000001000f110c main + 156
    26  libdyld.dylib                       0x0000000181e868b8 <redacted> + 4
)
2016-03-07 15:42:13.317 LiveRoom[1173:1362453] *** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '-[VuforiaNativeRendererController fetchID]: unrecognized selector sent to instance 0x126db7510'
*** First throw call stack:
(0x182401900 0x181a6ff80 0x18240861c 0x1824055b8 0x18230968c 0x10010b730 0x10012cad8 0x100750648 0x101528b9c 0x100edbc20 0x100ed1ef4 0x100ed20d8 0x100dba220 0x100e8bb2c 0x10106a028 0x1000f71fc 0x100107528 0x100103c48 0x182db644c 0x1823b95f4 0x1823b9298 0x1823b69ac 0x1822e5680 0x1837f4088 0x18715cd90 0x1000f110c 0x181e868b8)
libc++abi.dylib: terminating with uncaught exception of type NSException
(lldb)

您可以隐藏复选框并根据<label> <input type="checkbox" /><img src="//placehold.it/100x100" /> </label>伪类和相邻的兄弟选择器设置img的样式，例如：

:checked

演示：https://jsfiddle.net/7zrpr5fd/

如何创建复选框图像库

1 个答案: